How can I use gsap.registerEffect correctly?

I have a problem recording an effect with gsap,
I create an animation template in a js file: “gsapEffect.js”, import it into my app.jsx and effect remains inaccessible, could you better explain to me how it works?

my gsapEffect.js file :

import gsap from "gsap";

gsap.registerEffect({
    name: "backgroundOpening",
    effect: (direction,targets, ...config) => {

        const animationType = config.direction === "from" ? gsap.from : gsap.to;

        return animationType(targets, {
            top: config.top,
            duration: config.duration,
            ease: config.ease,
        });
    },
    defaults: { duration: 0.4, top:"-100%", ease: 'power2.inOut', direction: "to" },
    extendTimeline: true
});

I import it in my app.jsx :

import "./customFunctions/gsapEffect.js"

and use it in my componenent juste like that :

import { h } from 'preact';
import { MenuDialogContent } from "./MenuDialogContent.jsx";
import useStore from "../store/store.js";
import { useEffect } from "preact/hooks";
import { gsap } from "gsap";

export function Menu() {
    const { activeMenu, setActiveMenu } = useStore();

    const setMenuBackgroundAnimation = (tl, yBackgroundAnimationValue) => {
        return tl.to(".menu", {
            top: yBackgroundAnimationValue,
            duration: 0.4,
            ease: 'power2.inOut',
        });
    };

    const setMenuTextAnimation = (tl, yTextAnimationValue, isEntering) => {
        return tl.to('.menu-anim li', {
            top: yTextAnimationValue,
            opacity: isEntering ? 1 : 0,
            stagger: 0.08,
            ease: isEntering ? 'power4.in' : 'power4.out',
            duration: 0.1
        });
    };

    useEffect(() => {
        const tl = gsap.timeline();

        if (activeMenu) {
            tl.backgroundOpening('.menu', {
                duration: 0.4,
                ease: 'power2.inOut',
                top: 0
            });

            setMenuTextAnimation(tl, 0, true);
        } else {
            setMenuTextAnimation(tl, '-5vh', false);
            setMenuBackgroundAnimation(tl, '-100vh');
        }
    }, [activeMenu]);

    return (
        <>
      <span className={`font-bold`} onClick={() => setActiveMenu(!activeMenu)}>
        <button className={activeMenu ? "dots on" : "dots"}>
          <span></span>
        </button>
      </span>
            <MenuDialogContent argSetter={setActiveMenu} trigger={activeMenu} />
        </>
    );
}