Cursor size resets to default

[h3ma209]

ok i have this code
what i want to achieve is
when the cursor enters the div change pic and size too 200px
and when it hovers on the title i want it to change the size too 300px

it does it with no problem but once i enter the title area and becomes 300px
and when i leave the area it goes back to 20px

and also the colors of the img are inverted
i have to leave the div and re enter for it to have the normal colors

<motion.div data-cursor-background-image="https://media2.giphy.com/media/jncVQOzEP11H5UiHbI/giphy.gif?cid=ecf05e47s906rmm4g91lxsrd6hvlmi3srte6pll4asrg709m&rid=giphy.gif&ct=g" data-cursor-size="200px" className="h-full w-full flex flex-col place-items-center justify-center" > <motion.span initial={{ opacity: 0, y: 70 }} whileInView={{ opacity: 1, y: 0, transition: { duration: 0.5, type: "spring", delay: 0.2 }, }} viewport={{ once: true }} data-cursor-size="300px" > App </motion.span> </motion.div>

[ehsan-shv]

Could you please provide a simple demo on Codesandbox?

[h3ma209]

so basically

i have a div which contains a title in the center

when the mouse enters i want the size to be 200 and when it hovers on the title change it to 300

it works fine but when i leave the title area inside of going back to 200

it goes back to 20 where i set it when i intialized the class