After adding framer-motion, routing not works but link change

Question

I added framer motion to my project, because i want to make some animations between pages, but now i've been staying all the time at the home page. I will be grateful for any help. Here's my code:

class App extends Component {
//(...)
location = () => {
    useLocation();
  }
//(...)
<Router>
        <nav>
          {!this.state.setIsAuth ? (
            <>
              <Link to="/">Home</Link>
              <Link to="/contact">Contact</Link>
              <Link to="/login"> Login </Link>
            </>
          ) : (
            <>
              <Link to="/news"> News </Link>
              <Link to="/createpost"> Create Post </Link>
              <Link to="/calendar"> Calendar </Link>
              <a href="/" onClick={this.signUserOut}> Log Out</a>
            </>)}
        </nav>
        <AnimatePresence>
          <Routes location={this.location} key={this.location.pathname}>
            <Route exact path="/" element={<Home />} />
            <Route path="/news" element={<News />} />
            <Route path="/login" element={<Login setIsAuth={this.signIn} />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/createpost" element={<CreatePost setIsAuth={this.signIn} />} />
            <Route path="/calendar" element={<Calendar />} />
          </Routes>
        </AnimatePresence>
      </Router>

and Home.js to show you how structures of my pages look like

class Home extends Component {
    render() {
        return (
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                <header className="header">

                    <div className="header__text-box">
                        <h1 className="heading__text-box">
                            <span className="heading-primary--main">TeamWork</span>
                            <span className="heading-primary--sub">THE WAY TO SUCCESS</span>
                        </h1>

                        <a href="#section-options" className="btn btn--accent btn--animated">Take your opportunity</a>
                    </div>
                </header>
            </motion.div>
        )
    }
}