[React router]Uncaught Error: Invalid hook call.

前提・実現したいこと

reactでルーティングを行なっています。
はじめhashrouterを使っていたのですが、諸事情で#が付いていないURLに変更したく色々試していましたが以下のようなエラーが出て困っています。
2の可能性が高いのかなあと思うのですが、https://reactrouter.com/web/api/Hooks/usehistoryと一緒のことをやっているので大丈夫なのかなとも思います。
わかる方がいましたら、ご教授お願いします。

発生している問題・エラーメッセージ

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

該当のソースコード

packagejson
1    "react": "^16.7.0",
2    "react-dom": "^16.7.0",
3    "react-router": "^3.2.6",
4    "react-router-dom": "^5.1.2",

import { useHistory } from "react-router-dom";

export default function PersistentDrawerLeft() {
  
  let history = useHistory();

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleChange = (event) => {
    setAuth(event.target.checked);
  };

  const handleMenu = (event) => {
    setAnchorIcon(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorIcon(null);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const handleToSubmit = () => {
    history.push("/submit");
    setOpen(false);
  };

  const handleToHome = () => {
    history.push("/view");
    setOpen(false);
  };