Framer Motion 'Exit' property not working with Nextjs - next.js

Question

I just started working with Framer motion and Nextjs, and I ran into a problem where I am unable to get the exit property to animate. The code below shows that I am trying to toggle the word 'Hello' on and off, and while the word appears when toggled on, the exit animation does not trigger when removed. The Framer API docs suggest that AnimatePresence needs to wrap the motion.div as seen below in order for the exit animation to trigger, but this has not fixed the issue.
Any help would be appreciated.
import React from "react";
import classes from "./FramerMotion.module.css";
import { motion, AnimatePresence, } from "framer-motion";
import { useState } from "react";
function FramerMotion() {
const [words, setWords] = useState(true);
const toggleWords = (event) => {
setWords(words === false);
console.log(words);
};
const codeVariant = {
start: {
opacity: 0,
},
middle: {
opacity: 1,
transition: {
duration: 3,
},
},
end: {
opacity: 0,
transition: {
duration: 3,
},
},
};
return (
<>
<div className={classes.container}>
{words && (
<AnimatePresence>
<motion.h1
key="modal"
variants={codeVariant}
initial="start"
animate="middle"
exit="end"
>
Hello
</motion.h1>
</AnimatePresence>
)}
</div>
<button onClick={toggleWords}>Show/Hide</button>
</>
);
}
export default FramerMotion;

Answer 1

I solved this problem. The problem was that AnimatePresence was improperly placed.
Fix:
return (
<>
<div className={classes.container}>
<AnimatePresence>
{words && (
<motion.h1
key="modal"
variants={codeVariant}
initial="start"
animate="middle"
exit="end"
>
Hello
</motion.h1>
)}
</AnimatePresence>
</div>