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- #415 (comment)

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

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