перезагрузка страницы когда прописываешь адрес самостоятельно

добрый день уважаемые знатоки. Вопрос такой реализовывал логику, чтоб при переходе на не существующую страницу отображалась страницы 404 и копка назад, но когда задаю адрес она у меня перезагружается и отправляется на ту страницу с которой был произведен переход. как побороть не как не пойму

const ProtectedRoute = ({children}) => {
  const currentUser = useContext(CurrentUserContext);
  return currentUser?.isLoggedIn ? children : <Navigate to='/'/>
}

export default ProtectedRoute;

  const [currentUser, setCurrentUser] = useState({isLoggedIn: false});

  return (
    <CurrentUserContext.Provider value={currentUser}>
      <div className="App">
        <div className="App__content">
          <Routes>
            <Route path="/" element={
              <Main/>
            }/>
            <Route path="/signin" element={
              <Login/>
            }/>
             <Route path="/movies" element={
              <ProtectedRoute>
                <Movies/>
              </ProtectedRoute>
            }/>
            <Route path="/profile" element={
              <ProtectedRoute>
                <Navigation/>
                <Profile  />
              </ProtectedRoute>
            }/>
            <Route path="*" element={
              <NotFoundPage/>
            }/>
          </Routes>
        </div>
      </div>
    </CurrentUserContext.Provider>
  );

function NotFoundPage() {
  return (
    <div className="page-error">
      <h2 className="page-error__title">
        404
      </h2>
      <p className="page-error__text">Страница не найдена</p>
      <Link
        to={-1}
        className='page-error__link'
      >
        Назад
      </Link>
    </div>
  )
}

export default NotFoundPage;

если что-то еще надо скажите