I want to be able to go back to the previous page (just like using the back button in the browser), so I tried using useHistory's goBack(), but it does not work.

I imported useHistory:

import {
  BrowserRouter,
  Route,
  useHistory
} from "react-router-dom";

I wrote this function:

function GoBack(){
  const history = useHistory();

  return (
    <>
      <button onClick={() => history.goBack()}>Back</button>
    </>
);
}

I get this error:

TypeError: Cannot read properties of undefined (reading 'goBack')

This calls GoBack:

  function App() {
  const [user] = useAuthState(auth);
  return (
    <div className="App">
      <header className="App-header">
        <GoBack />
      </header>
      <section>{user ? <ChatRoom /> : <SignIn />}</section>
    </div>
  );
}

How can I fix this problem?