Questions from wrapping animate.js ?

[SeqCrafter]

I try to use the interesting JavaScript library in Reflex, and initially I try to repeat their example codes in a React component, and my codes are like this:

Actually I can get the bounce effect, But how should I execute the js function handle_click to

Make the logo rotate when I click the button.

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import reflex as rx
from reflex.utils import imports
from reflex.components.radix.themes.components.card import Card

class State(rx.State):
    rotate_num: int = 0

    @rx.event
    def add_rotate_number(self):
        self.rotate_num += 1
        

    @rx.event
    def clear_rotate(self):
        self.rotate_num = 0


class MyCard(Card):
    lib_dependencies: list[str] = [
        "animejs"
    ]
    def add_imports(self) -> imports.ImportDict:
        """Add the imports for the component."""
        return {
            "react": [
                imports.ImportVar(tag="useEffect"),
                imports.ImportVar(tag="useRef"),
            ],
            "animejs": [
                imports.ImportVar(tag="animate"),
                imports.ImportVar(tag="createScope"),
                imports.ImportVar(tag="createSpring"),
                imports.ImportVar(tag="createDraggable"),
            ],
        }

    def add_hooks(self) -> list[str | rx.Var]:
        self._get_ref_hook()
        return [
            """
const scope = useRef(null);
useEffect(() => {

    scope.current = createScope({ref_animate_card}).add( self => {
    
      // Every anime.js instances declared here are now scopped to <div ref={ref_animate_card}>

      // Created a bounce animation loop
      animate('.logo', {
        scale: [
          { to: 1.25, ease: 'inOut(3)', duration: 200 },
          { to: 1, ease: createSpring({ stiffness: 300 }) }
        ],
        loop: true,
        loopDelay: 250,
      });
      
      // Make the logo draggable around its center
      createDraggable('.logo', {
        container: [0, 0, 0, 0],
        releaseEase: createSpring({ stiffness: 200 })
      });

      // Register function methods to be used outside the useEffect
      self.add('rotateLogo', (i) => {
        animate('.logo', {
          rotate: i * 360,
          ease: 'out(4)',
          duration: 1500,
        });
      });

    });

    // Properly cleanup all anime.js instances declared inside the scope
    return () => scope.current.revert()

  }, []);
  const handle_click = () => {
    scope.current.methods.rotateLogo(1);
}

        """
        ]


def index() -> rx.Component:
    # Welcome Page (Index)
    return rx.container(
        MyCard.create(
            rx.vstack(
                rx.flex(
                    rx.box(
                        rx.text("Using with React"),
                    ),
                    rx.button(
                        rx.icon(tag="undo-2"),
                        variant="ghost",
                        on_click=State.clear_rotate,
                    ),
                    justify="between",
                    width="100%",
                ),
                rx.image(src="/react.svg", width="100px", class_name="mx-auto logo"),
                rx.button(
                    f"ROTATIONS: {State.rotate_num}",
                    class_name="mx-auto",
                    on_click=State.add_rotate_number,
                ),
                spacing="3",
            ),
            class_name="w-2/4 mx-auto",
            id="animate_card"
        )
    )


app = rx.App(
    theme=rx.theme(
        appearance="light",
        has_background=True,
    )
)
app.add_page(index)

[SeqCrafter]

It's good to use rx.script