[Bug] Problema no useState history | React: gerenciamento de estados globais com ContextAPI

estou com o problema no useState do hystory o erro e o seguinte `Compiled with problems:X

ERROR in ./src/pages/Login/index.js 18:18-28

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, unstable_useBlocker, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

ERROR in ./src/pages/Login/index.js 91:10-20

O meu codigo está desse jeito: Login/index.js

import { Button } from "@material-ui/core";
import { Container, Titulo, InputContainer } from "./styles";
import { Input, InputLabel, InputAdornment } from "@material-ui/core";
import { useHistory } from "react-router-dom";

function Login({nome,setNome, saldo, setSaldo}) {

  const history = useHistory()

  return (
    <Container>
      <Titulo>Insira o seu nome</Titulo>

      <InputContainer>
        <InputLabel>Nome</InputLabel>
        <Input
          value={nome}
          onChange={(event) => setNome(event.target.value)}
          type="text"
        />
      </InputContainer>

      <InputContainer>
        <InputLabel>Saldo</InputLabel>
        <Input
          value={saldo}
          onChange={(event) => setSaldo(event.target.value)}
          type="number"
          startAdornment={<InputAdornment position="start">R$</InputAdornment>}
        />
      </InputContainer>

      <Button variant="contained" color="primary" onClick={() => history.push('/feira')} >
        Avançar
      </Button>
    </Container>
  );
}

export default Login;

ROUTES.JS:

import Login from "./pages/Login";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Feira from "./pages/Feira";
import Carrinho from "./pages/Carrinho";
import { useState } from "react";

export default function Router() {
  const [nome, setNome] = useState("");
  const [saldo, setSaldo] = useState(0);
  return (
    <BrowserRouter>
      <Routes>
        <Route
          exact
          path="/"
          element={
            <Login
              nome={nome}
              setNome={setNome}
              saldo={saldo}
              setSaldo={setSaldo}
            />
          }
        />
        <Route exact path="/feira" element={<Feira />} />
        <Route exact path="/carrinho" element={<Carrinho />} />
      </Routes>
    </BrowserRouter>
  );
}

Uma outra reclamação e que esse curso está muito desatualizado para 2023 na parte do switch,route e routes Não se usa mais dessa forma, acho que pelo menos deviam escrever no 'Para saber mais' que algumas coisas estão obsoletas e que atualizaram

Eu consegui resolver, e so usar useNavigate em vez de history:

`import { useNavigate} from "react-router-dom"; import { Button } from "@material-ui/core"; import { Container, Titulo, InputContainer } from "./styles"; import { Input, InputLabel, InputAdornment } from "@material-ui/core";

function Login({nome,setNome, saldo, setSaldo}) {

const navigate = useNavigate();

function clickFeira() { navigate("/feira"); }

return ( Insira o seu nome

  <InputContainer>
    <InputLabel>Nome</InputLabel>
    <Input
      value={nome}
      onChange={(event) => setNome(event.target.value)}
      type="text"
    />
  </InputContainer>

  <InputContainer>
    <InputLabel>Saldo</InputLabel>
    <Input
      value={saldo}
      onChange={(event) => setSaldo(event.target.value)}
      type="number"
      startAdornment={<InputAdornment position="start">R$</InputAdornment>}
    />
  </InputContainer>

  <Button variant="contained" color="primary" onClick={clickFeira}>
    Avançar
  </Button>
</Container>

); }

export default Login; `