How do I wrap react-image-annotation library on reflex

[PaulBryanCo]

Hello everyone, this is my first time wrapping a react library in reflex framework. I just wanted to ask on why the wrapping doesn't work or doesn't show anything at all. I'm sure that I'm missing something but not sure what it is.
I am also using reflex 0.6.5
Link for the react_image_annotation library:
https://github.com/Secretmapper/react-image-annotation
This is my code:
react_image_annotation.py

import reflex as rx

class ReactImageAnnotation(rx.Component):
    """A Reflex wrapper for react-image-annotation."""

    library = "react-image-annotation"

    tag = "Annotation"

    src: rx.Var[str]
    annotations: rx.Var[list]
    value: rx.Var[dict]
    type: rx.Var[str]
    on_change: rx.EventHandler
    on_submit: rx.EventHandler

state.py

    annotations: list = []
    annotation: dict = {}

    def update_annotation(self, annotation: dict):
        """Handles when an annotation is changed."""
        print("UPDATING ANNOTATION")
        self.annotation = annotation

    def submit_annotation(self, annotation: dict):
        """Handles when a new annotation is submitted."""
        geometry, data = annotation.get("geometry"), annotation.get("data")
        print("Submitted annotation")
        print("GEOMETRY", geometry)
        print("DATA", data)
        # Append the new annotation to the list
        self.annotations.append(
            {
                "geometry": geometry,
                "data": {**data, "id": uuid.uuid4()},
            }
        )

        self.annotation = {}

frontend part:

def index() -> rx.Component:
    return ReactImageAnnotation.create(
                src='assets/test.png',
                annotations=State.annotations,
                value=State.annotation,
                type="RECTANGLE",
                on_change=State.update_annotation(State.annotation),
                on_submit=State.submit_annotation(State.annotation),
            )

Thanks!!