Не получается сделать редирект после авторизации

Мне нужно, чтобы открывалась компонента Dashboard после успешной авторизации

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

export default class LoginForm extends React.Component {
 
  constructor() {
    super();
    this.state = {
      username: "",
      password: ""
    }
  }

  handleUsernameChanged(event) {
    this.setState({ username: event.target.value });
  }

  handlePasswordChanged(event) {
    this.setState({ password: event.target.value });
  }

  submitForm(event) {
    event.preventDefault();
    superagent
      .post('/login')
      .send({
        username: this.state.username,
        password: this.state.password
      })
      .end((err, res) => {
        if (err) {
          this.setState({ errorMsg: "Authorization Failed" });
          return;
        }
        localStorage.setItem('token', 'secrettoken')
        console.log('res.body:', res.body);
        this.setState();
      })
  }

  isAuthenticated() {
    const token = localStorage.getItem('token');
    return token && token.length > 10;
  }

  render() {
    const isAlreadyAuthenticated = this.isAuthenticated();
    return (
      <div>
      /*{isAlreadyAuthenticated ? 'Authenticated' : 'Not Authenticated'}*/
        {isAlreadyAuthenticated ? 
        //<Redirect to={{ pathname: '/dashboard' }} /> 
        <Navigate to="/dashboard" replace={true} />
        : (
          <form onSubmit={this.submitForm.bind(this)}>
            <TextField
              margin="normal"
              required
              fullWidth
              id="userName"
              label="User Name"
              name="userName"
              autoFocus
              value={this.state.username}
              onChange={this.handleUsernameChanged.bind(this)}
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
              value={this.state.password}
              onChange={this.handlePasswordChanged.bind(this)}
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            /*  token={token}
             setToken={setToken}
             api={api}
             setApi={setApi} */
            /* onClick={handleClick} */
            > Sign In </Button >
          </form >
        )}
      </div>

    );
  }
}

Насколько я поняла, в v6 react-router-dom убрали функцию redirect <Redirect to={{ pathname: '/dashboard' }} /> , теперь используется Navigate <Navigate to="/dashboard" replace={true} />. Написала как в [документации][1], но выдает ошибку: "

Navigate may be used only in the context of a component. "

Написала обычные роуты, но в этом случае страница с формой не появляется

  <Routes>
    <Route path="/" element={<Test1 />} />
    <Route path="/test" element={<Test />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
 </BrowserRouter>```

 [1]: https://reactrouter.com/en/main/components/navigate