Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

Question

So I'm a beginner in react, and I'm racking my brain to try to solve the error and still I'm not getting it... I've already messed with this code below, to try to fix it and nothing... if anyone can help I'd appreciate it.

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.js

import React from 'react';
import { Router, useHistory } from 'react-router-dom';

import GlobalStyle from './styles/GlobalStyles';
import Header from './components/Header';
import Rotas from './routes';

export default function App() {
  const history = useHistory();
  return (
    <Router history={history}>
      <Header />
      <Rotas />
      <GlobalStyle />
    </Router>
  );
}