'How to use usePopper in kotlin (kotlin-react-popper)

I would like to create a tooltip in my react application that I created with kotlin JS. To use this I came across the popper library. The example I found (https://popper.js.org/react-popper/v2/) I would like to "translate" to kotlin syntax, but I struggle to define the options argument of the usePopper method. So to summarize, I would like to transform this:

const Example = () => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [arrowElement, setArrowElement] = useState(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
  });

to sth like this:

val example = FC<ExampleProps> { props ->
    val (referenceElement, setReferenceElement) = useState(null)
    val (popperElement, setPopperElement) = useState(null)
    val (arrowElement, setArrowElement) = useState(null)
    val popper = usePopper(referenceElement, popperElement, OPTIONS)
    // more code
}

where OPTIONS should be replaced by an instance of the type UsePopperOptions, which should represent

{modifiers: [{ name: 'arrow', options: { element: arrowElement }}],}

// Kotlin-React, Kotlin-Wrappers, Kotlin-React-Popper //



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source