[Bug] App duplicado

Quando fiz as rotas seguindo o passo a passo do primeiro vídeo, o conteúdo de App ficou aparecendo duplicado na raiz e na página de favoritos aparece o oi e o conteúdo de App embaixo. Vou deixar meus códigos de index.js e App.js. Não estou conseguindo resolver, se alguém puder me ajudar, agradeço :)

Código de index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {createGlobalStyle} from 'styled-components'
import {BrowserRouter, Routes, Route} from 'react-router-dom';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }

  li{
    list-style-type: none;
  }
`

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <BrowserRouter>
      <Routes>
        <Route path="/favoritos" element={<p>Oi!</p>} />
        <Route path="/" element={<App />}  />
      </Routes>
    </BrowserRouter>
    <App />
  </React.StrictMode>
);

Código de App.js

import Header from './componentes/Header';
import styled from 'styled-components';
import Pesquisa from './componentes/Pesquisa';
import UltimosLancamentos from './componentes/UltimosLancamentos';

const AppContainer = styled.div`
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(90deg, #002F53 35%, #326589);

`

function App() {
  return (
    <AppContainer>
      <Header/>  
      <Pesquisa/>    
      <UltimosLancamentos/>   
    </AppContainer>
  );
}

export default App;