using the npm onMouseOver and onMouseLeave in React

[kashitamang]

I'm using this npm and it works great. The only thing I'm wondering is how to turn it on and off under the condition of whether a user's mouse is active or inactive on a certain element. So far, the function runs only if the mouse hovers over my element, but it does not go away onMouseLeave. I can't figure out how to disable to trailing mouse under conditions met. Thank you this is awesome!!!

import React, { useState, useEffect } from 'react';
import avatar from '../../assets/avatar.jpg';
import { fairyDustCursor } from 'cursor-effects';

export default function Avatar() {
  let [showAnimation, setShowAnimation] = useState(false);

  const toggleAnimation = () => {
    setShowAnimation(!showAnimation);
  };

  function handleCursor() {
    if (showAnimation === true) {
      fairyDustCursor({ colors: ['#ebfae0'] });
    } else if (showAnimation === false) {
      // i have tried returning here...setting length and size to 0 but nothings works so far :D 
    }
  }

  useEffect(() => {
    console.log(showAnimation);
    handleCursor();
  });

  return (
    <img
      onMouseOver={toggleAnimation}
      onMouseLeave={toggleAnimation}
      src={avatar}
      alt="apple memoji of a person with a medium skintone and shoulder length brown hair smiling"
    />
  );
}

[tholman]

You should be able to call destroy on your cursor. If you could set up a live demo in codesandbox it'd be a little easier for me to debug here.