ts error happened when run the Official demo

[17dun]

when I run the official example https://popper.js.org/react-popper/v2/

import React, { useState } from 'react'; import { usePopper } from 'react-popper';

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 } }], });

return ( <>

Reference element

  <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
    Popper element
    <div ref={setArrowElement} style={styles.arrow} />
  </div>
</>

); };

I got a ts error as below： `ERROR in src/components/UserSearch/test.tsx:18:12 TS2322: Type 'Dispatch<SetStateAction>' is not assignable to type 'LegacyRef | undefined'. Type 'Dispatch<SetStateAction>' is not assignable to type '(instance: HTMLDivElement | null) => void'. Types of parameters 'value' and 'instance' are incompatible. Type 'HTMLDivElement | null' is not assignable to type 'SetStateAction'. Type 'HTMLDivElement' is not assignable to type 'SetStateAction'. Type 'HTMLDivElement' provides no match for the signature '(prevState: null): null'. 16 | 17 |

18 | <div ref={setPopperElement} style={styles.popper} {...attributes.popper}> | ^^^ 19 | Popper element 20 |

21 |

`

Who can tell me what to do？ thx~

[zikphil]

Bump - same

[hr23232323]

@17dun @zikphil this is the most helpful answer- https://github.com/floating-ui/react-popper/issues/415#issuecomment-821968179

Basically, add explicit typing to the state variables like so-

const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null)
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)