How to use the reakit.useTooltipState function in reakit

({ title, children, placement = 'top', ...props }, ref) => {
    const tooltipState = useTooltipState({ placement, unstable_animated: true })

    const handleAnimationRest = () => {
      tooltipState.unstable_stopAnimation()
    }

    const [{ opacity }, updateTooltipSpring, stopTooltipSpring] = useSpring(() => ({
      delay: 0,
      opacity: 0,
      onRest: handleAnimationRest,
      config: { clamp: true, velocity: 14, friction: 20 },
    }))

    // Update tooltip placement
    useEffect(() => {
      tooltipState.place(placement)
    }, [placement])

const Example = () => {
    const tooltip = useTooltipState({ visible: true });
    return (
      
        
          Reference
        
        
          
          Tooltip
        
      
    );
  };
  return ;

function ExperimentalLink(props: GatsbyLinkProps<{}>) {
  const { unstable_referenceRef, ...tooltip } = useTooltipState({
    placement: "right",
    unstable_fixed: true
  });
  return (
    <>
      
        {props.children}
        
      
      
         Experimental
      
    
  );
}