Animated cursor made using Framer motion keep disappearing - reactjs

Question

I am building a portfolio site using nextjs + tailwindcss and framer motion for animations.
I have implemented a custom animated cursor using framer motion, this works fine but after a few minutes of reloading it keeps disappearing for no reason. Here is a video:
https://www.loom.com/share/84b2bbe766e14e938632b944578d4132
I am able to fix this issue by downgrading the framer-motion version to an older one (v5.3.2), but it has some other bugs with React v18, so I can't downgrade to that version.
I cannot figure out why this keeps disappearing and reappearing, and I can't reproduce this bug at will.
This is my custom mouse component:
<motion.div
variants={variants}
animate={cursorContext?.cursorVariant}
className={`h-5 w-5 rounded-full fixed top-[50vh] left-[50vw] pointer-events-
none z-[999] mix-blend-difference ${showCursor ? 'block' : 'hidden'}`}
/>
Here are my variants:
const variants = {
regular: {
x: cursorContext!.mousePosition.x - 5,
y: cursorContext!.mousePosition.y - 5,
border: "white 2px solid",
},
clickable: {
x: cursorContext!.mousePosition.x - 5,
y: cursorContext!.mousePosition.y - 5,
border: 'none',
backgroundColor: 'white',
width: 10,
height: 10,
},
largeClickable: {
x: cursorContext!.mousePosition.x - 10,
y: cursorContext!.mousePosition.y - 10,
border: 'none',
backgroundColor: 'white',
width: 20,
height: 20,
},
};
Here are all of my installed packages:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"#types/react-scroll": "^1.8.5",
"autoprefixer": "^10.4.12",
"framer-motion": "^7.6.15",
"postcss": "^8.4.18",
"react-icons": "^4.6.0",
"react-scroll": "^1.8.8",
"tailwindcss": "^3.2.1",
"typescript": "4.8.4"
}
}
Thanks for the help in advance.