How to use the react-popper.usePopper function in react-popper

hoverRequestToShow,
  focusRequestToShow,
  placement = 'right',
  focusable = true,
}: TooltipProps): JSX.Element | null => {
  const [tooltipElement, setTooltipElement] = useState(null)

  const {
    state: { showState },
    dispatch,
    addOpenTooltip,
    removeOpenTooltip,
    closeOtherOpenTooltips,
  } = useStatefulTooltip()

  const popper = usePopper(referenceElement, tooltipElement, {
    placement: placement,
    modifiers: [{ name: 'offset', options: { offset: [0, 8] } }], // offset from the tooltip's reference element
  })

  const { isLoading, isError, htmlContent } = useContentQuery(
    contentEndpoint,
    contentEndpoint,
    showState != 'hidden' && showState != 'error'
  )

  // useEffect for responding to the reference element's request to show when hovered
  useEffect(() => {
    if (hoverRequestToShow) {
      return dispatchRequestShowFromRefHover(dispatch, id)
    }

export function usePanel(options?: any) {
  const [open, setOpen] = useState(false)
  const [buttonElement, setButtonElement] = useState(null)
  const [panelElement, setPanelElement] = useState(null)
  const { styles, attributes, update } = usePopper(
    buttonElement,
    panelElement,
    options || {
      placement: 'bottom-end',
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 2],
          },
        },
      ],
    }
  )

  const handleMouseDown = useCallback(

export function Solution({
  trackTitle,
  trackIconUrl,
  menteeAvatarUrl,
  menteeHandle,
  exerciseTitle,
  isStarred,
  haveMentoredPreviously,
  status,
  updatedAt,
  url,
}) {
  const [referenceElement, setReferenceElement] = useState(null)
  const [popperElement, setPopperElement] = useState(null)
  const [showPopper, setShowPopper] = useState(false)
  const { styles, attributes } = usePopper(referenceElement, popperElement)

  return (
    <>
       setShowPopper(true)}
        onMouseLeave={() => setShowPopper(false)}
      >