Olá, Vitória

Parece que o problema pode estar na sua tag <Route /> para a página inicial. No código que você compartilhou, a tag <App /> está sendo renderizada duas vezes, uma vez dentro do <Route /> e outra vez fora do <BrowserRouter />. Isso pode estar causando o problema que você está vendo.

Aqui está o trecho do seu código que pode estar causando o problema:

root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route path="/favoritos" element={<p>Oi!</p>} />
                <Route path="/" element={<App />} />
            </Routes>
        </BrowserRouter>
        <App />
    </React.StrictMode>
)

Note que <App /> está sendo renderizado duas vezes, uma vez dentro do <Route /> e outra vez fora do <BrowserRouter />. Para corrigir isso, você deve remover a tag <App /> que está fora do <BrowserRouter />. O código corrigido ficaria assim:

root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route path="/favoritos" element={<p>Oi!</p>} />
                <Route path="/" element={<App />} />
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
)

Com essa alteração, a página inicial deve ser renderizada corretamente, sem o "Oi!" aparecendo por cima.

Espero ter ajudado e bons estudos!