How to use the react-use.useToggle function in react-use

window.r = tableContainer.current;
    let _ = {
      width: tableContainer.current.clientWidth,
      height: tableContainer.current.clientHeight - 79
    };
    console.log(_);
    setTSize(_);
  };

  // console.log(tSize);

  // useMount(() => setTimeout(tableResize, 500));

  const [editDash, toggleDashEdit] = useToggle(false);
  const [showReadme, toggleReadme] = useToggle(false);
  const [editReadme, toggleReadmeEdit] = useToggle(false);
  const [showParallelCoord, toggleParallelCoord] = useToggle(false);

  const updateDashConfigText = debounce(1000, (id, text) => {
    if (!id)
      id = toGlobalId("File", directory.path + "/default.dashcfg");
    updateText(id, text);
  });

  const updateReadme = debounce(1000, (id, text) => {
    if (!id)
      id = toGlobalId("File", directory.path + "/README.md");
    updateText(id, text);
  });

  const {files, fullExperiments, readme, dashConfigs: dC} = directory;

export default forwardRef(({ value = [], onChange = noop, onError = noop }, ref) => {
  const { viewer: user } = useViewer()
  const filesRef = useRef()
  const [loading, setLoading] = useToggle(false)
  const [ids, setIds] = useState(value)
  const [files, setFiles] = useState(value.map(x => ({ id: x })))
  const [create, { loading: createLoading }] = useMutation(CREATE_MEDIA, {
    onCompleted: data => {
      const media = get(data, 'createMedia')
      fireChange([
        ...ids,
        media.id
      ])
    },
    onError
  })
  useEffect(() => {
    fireChange(value)
  }, [value])
  const fireChange = ids => {

export const HeadersNavigation: React.FunctionComponent = ({
  enableSmoothScroll = false,
  children = null,
}) => {
  const { showMobileRightNav } = useContext(GenericDocsContext);
  const headersWrapperRef = useRef();
  const [locked, toggleLocked] = useToggle(false);
  useLockBodyScroll(locked);

  const onMouseEnter = () => {
    toggleLocked(true);
  };

  const onMouseLeave = () => {
    toggleLocked(false);
  };

  return (

export default forwardRef(({ value, onChange = noop, onError = noop }, ref) => {
  const { viewer: user } = useViewer()
  const [loading, setLoading] = useToggle(false)
  const [id, setId] = useState(value)
  const [create, { loading: createLoading }] = useMutation(CREATE_MEDIA, {
    onCompleted: data => {
      fireChange(get(data, 'createMedia.id'))
    },
    onError
  })
  const { data, loading: getLoading, refetch } = useQuery(GET_MEDIA, {
    variables: { id },
    skip: !id
  })
  useEffect(() => {
    fireChange(value)
    value && refetch({ id: value })
  }, [value])
  const fireChange = id => {

..._props
                }) {
  const {name, path, directories, files, experiments} = directory || {};

  const sortedDirectories = (directories && directories.edges || [])
      .filter(_ => _ !== null)
      .map(({node}) => node)
      .filter(_ => _ !== null)
      .sort(by(strOrder, "name"))
      .reverse();

  const numOfDir = directories ? directories.edges.length : 0;
  const numOfFiles = files ? files.edges.length : 0;

  const [show, toggle] = useState(false);
  const [showConfirm, toggleShowConfirm] = useToggle(false);
  useEffect(() => {
    //note: does not work b/c the props are not updated.
    toggle(false);
  }, [name, path, numOfDir]);

  function onDelete(e) {
    e.stopPropagation();
    toggle(false);
    toggleShowConfirm(false);
    deleteDirectory(show);
  }

  return <>

export default ({ className }: ThemeSwitcherProps) => {
  const [show, toggle] = useToggle(false)
  const isFullscreen = useFullscreen({ current: document.body as any }, show, { onClose: () => toggle(false) })

  return (
    
      {isFullscreen ?  : }
    
  )
}

export default function InlineFile({type, cwd, glob, title, src, ...chart}) {
  const [files, setFiles] = useState([]);
  const [index, setIndex] = useState(-1);
  const [showConfig, toggleShowConfig] = useToggle();

  //does not allow multiple directories
  if (typeof cwd === 'object') return null;

  useEffect(() => {
    let running = true;
    const abort = () => running = false;
    globFiles({cwd, glob}).then(({glob, errors}) => {
      if (running && glob)
        setFiles([...glob].sort(by(strOrder, "path")));
    });
    return abort;
  }, [cwd, glob, setFiles]);

  const selected = files[index >= 0 ? index : (files.length + index)];
  const pathPrefix = commonPrefix(files.map(({path}) => path));