Apply framer-motion to non-functional components - reactjs

Question

If you want to add framer-motion to a functional component, then add <motion.div ...> to the render method. Easy. But that's not possible in the case of non-functional components. Say I want to add a page-transition effect between the Login component and the anotherPage functional component, how is that done?
Here is some code for reference:
import React from "react"
import ReactDOM from "react-dom"
import { Route, Switch, BrowserRouter} from "react-router-dom";
import { AnimatePresence} from "framer-motion";
const AnotherPage = () => {
return <h1>another page</h1>
};
class Login extends Component {
constructor() {
...
}
handleLogin = async (event) => {
...
}
handleInputChange = (event) => {
...
}
render() {
return (
<form onSubmit={this.handleLogin}>
<input type="text" name="email"
value={this.state.email}
onChange={this.handleInputChange}/>
<input type="text" name="password"
value={this.state.password}
onChange={this.handleInputChange}/>
<button className="btn" onClick={this.handleLogin}>login</button>
</form>
);
}
};
const Routers = () => {
return (
<BrowserRouter>
<AnimatePresence>
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/anotherPage" component={AnotherPage} />
</Switch>
</AnimatePresence>
</BrowserRouter>
);
};
ReactDOM.render(
<React.StrictMode>
<Routers/>
</React.StrictMode>,
document.getElementById("root")
)

Answer 1

It's not an issue of functional & non-functional components. You need to place your AnimatePresence component after Switch. If you place it before the Switch, then your AnimatePresence doesn't aware of the route change.
A workaround could be placing your AnimatePresence at the beginning of each component.
const AnotherPage = () => {
return (
<AnimatePresence>
<h1>another page</h1>
</AnimatePresence>
);
};
export default AnotherPage;
export default class Login extends Component {
constructor() {
// ...
}
handleLogin = async (event) => {
// ...
}
handleInputChange = (event) => {
// ...
}
render(){
return (
<AnimatePresence>
<h1>login page</h1>
</AnimatePresence>
);
}
}