React Property 'state' not existing on type 'Location'

Question

To start learning React I've set up a project but while making the Login functionality I run into the following issue:

The error:

What I'm trying to accomplish is that when a user is logged in, he is returned to the previous page. The rest of my functionality is working but it's just the fact dat the 'State' property in fact does not exist.

Any ideas?

Package.json

Edit:

I'm following this tutorial: https://ui.docs.amplify.aws/react/guides/auth-protected

Login:

import { useEffect } from "react";

import { Authenticator, useAuthenticator, View } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import { useNavigate, useLocation } from 'react-router';

export function Login() {
  const { route } = useAuthenticator((context) => [context.route]);
  const location = useLocation();
  const navigate = useNavigate();
  let from = location.state?.from?.pathname || '/';
  useEffect(() => {
    if (route === 'authenticated') {
      navigate(from, { replace: true });
    }
  }, [route, navigate, from]);
  return (
    <View className="auth-wrapper">
      <Authenticator></Authenticator>
    </View>
  );
}

Index.js:

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { ThemeProvider, createTheme, responsiveFontSizes } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import awsExports from './aws-exports';
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';


import { App } from './App';
import { Login } from './components/authentication/Login';
import SignOut from './components/authentication/Logout';
import { Banner } from './components/home/Banner';
import { Test } from './components/Test';
import { RequireAuth } from './components/authentication/RequireAuth'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

let darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundImage: 'linear-gradient(to right, #1f4037, #99f2c8)' /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
          backgroundRepeat: 'no-repeat'
        },
      },
    },
  },
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

darkTheme = responsiveFontSizes(darkTheme);

Amplify.configure(awsExports);

root.render(
  <React.StrictMode>
    <Authenticator.Provider>
      <BrowserRouter>
        <ThemeProvider theme={darkTheme}>
        <CssBaseline />
          <Banner />
          <Container maxWidth='md' style={{height: "100vh"}}>
              <Routes>
                <Route path="/" element={<App />} />
                <Route path="/login" element={<Login/>} />
                <Route path="/test" element ={<Test/>} />
                <Route path="/logout" element ={<RequireAuth><SignOut/></RequireAuth>} />
              </Routes>
          </Container>
        </ThemeProvider>
      </BrowserRouter>
    </Authenticator.Provider>
  </React.StrictMode>
);

reportWebVitals();

RequireAuth:

import { useLocation, Navigate } from 'react-router-dom';
import { useAuthenticator } from '@aws-amplify/ui-react';

export function RequireAuth({ children }) {
  const location = useLocation();
  const { route } = useAuthenticator((context) => [context.route]);
  if (route !== 'authenticated') {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}