How to use the reakit/Tooltip.useTooltipState function in reakit

export default ({ code, filename, jsx }) => {
  const copyTooltip = useTooltipState({ placement: "top-end" })
  const downloadTooltip = useTooltipState({ placement: "top-end" })
  const [copied, setCopied] = useState(false)

  const save = () => {
    dialog
      .showSaveDialog(null, {
        defaultPath: `${filename ? filename.split(".")[0] : "icon"}.${
          jsx ? "jsx" : "js"
        }`
      })
      .then(({ filePath }) => {
        if (filePath === undefined) {
          return
        }

        fs.writeFile(filePath, code, err => {
          // eslint-disable-next-line

export default ({ code, filename, jsx }) => {
  const copyTooltip = useTooltipState({ placement: 'top-end' })
  const downloadTooltip = useTooltipState({ placement: 'top-end' })
  const [copied, setCopied] = useState(false)

  const save = () => {
    dialog
      .showSaveDialog(null, {
        defaultPath: `${filename.split('.')[0]}.${jsx ? 'jsx' : 'js'}`
      })
      .then(({ filePath }) => {
        if (filePath === undefined) {
          return
        }

        fs.writeFile(filePath, code, err => {
          if (err) return console.error(err)
        })
      })

export default ({ code, filename, jsx }) => {
  const copyTooltip = useTooltipState({ placement: 'top-end' })
  const downloadTooltip = useTooltipState({ placement: 'top-end' })
  const [copied, setCopied] = useState(false)

  const save = () => {
    dialog
      .showSaveDialog(null, {
        defaultPath: `${filename.split('.')[0]}.${jsx ? 'jsx' : 'js'}`
      })
      .then(({ filePath }) => {
        if (filePath === undefined) {
          return
        }

        fs.writeFile(filePath, code, err => {
          if (err) return console.error(err)
        })

export default ({ code, filename, jsx }) => {
  const copyTooltip = useTooltipState({ placement: "top-end" })
  const downloadTooltip = useTooltipState({ placement: "top-end" })
  const [copied, setCopied] = useState(false)

  const save = () => {
    dialog
      .showSaveDialog(null, {
        defaultPath: `${filename ? filename.split(".")[0] : "icon"}.${
          jsx ? "jsx" : "js"
        }`
      })
      .then(({ filePath }) => {
        if (filePath === undefined) {
          return
        }

        fs.writeFile(filePath, code, err => {

({ disclosure, tooltip, items, placement, ariaLabel, ...props }, ref) => {
    const menu = useMenuState({ placement })
    const tooltipState = useTooltipState({ placement })

    const subRef = React.useRef(null)
    const mainRef = React.useRef(null)

    const [height, setHeight] = React.useState(0)
    const [submenuState, setSubmenuState] = React.useState({
      show: false,
      list: null,
      index: null,
      items: null,
      title: null,
    })
    const getHeight = element => {
      const bounds = element.getBoundingClientRect()
      return bounds.height
    }

const StatusBar: React.FC = () => {
  const serviceWorker = useServiceWorker();
  const offlineTooltip = useTooltipState({ gutter: 0 });
  const reloadTooltip = useTooltipState({ gutter: 0 });

  return (
    
      {serviceWorker.assetsCached ? (
        
          
           Offline ready
        
      ) : null}
      
        This application has been fully cached and can now be used offline.
      

      {serviceWorker.assetsUpdateReady ? (

const SidebarFile: React.FC<{ className?: string; model: Monaco.editor.ITextModel }> = ({ className, model }) => {
  const activeModel = useActiveModel();
  const editorManager = useContext(EditorManagerContext);
  const tooltip = useTooltipState({ gutter: 0 });

  const onClickDelete = () => {
    model.dispose();
  };

  return (
    
      <span> editorManager.focusModel(model)}&gt;{model.uri.fsPath.slice(1)}</span>
       onClickDelete()}&gt;
        <span aria-label="Delete file" role="img">
          ❌
        </span>
      
      
        Delete file

const StatusBar: React.FC = () => {
  const serviceWorker = useServiceWorker();
  const offlineTooltip = useTooltipState({ gutter: 0 });
  const reloadTooltip = useTooltipState({ gutter: 0 });

  return (
    
      {serviceWorker.assetsCached ? (
        
          
           Offline ready
        
      ) : null}
      
        This application has been fully cached and can now be used offline.
      

      {serviceWorker.assetsUpdateReady ? (