How to use the docz.useCurrentDoc function in docz

export const NavGroup = ({ item, sidebarRef }) => {
  const currentDoc = useCurrentDoc()
  const currentDocRef = React.useRef()
  const { name, menu } = item
  const [subheadingsVisible, setShowsubheadings] = React.useState(
    currentDoc.menu === name
  )
  const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
  React.useEffect(() => {
    if (sidebarRef.current && currentDocRef.current) {
      sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])
  return (
    <div data-testid="nav-group">
      <div>
        {item.name}
        </div></div>

export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
  const docs = useDocs()
  const to = item.route
  const headings = docs && getHeadings(to, docs)
  const current = useCurrentDoc()
  const isCurrent = item.route === current.route
  const showHeadings = isCurrent && headings && headings.length > 0
  const currentHash = getCurrentHash()
  return (
    
      
      {showHeadings &&
        headings.map(heading => (

export const Sidebar = React.forwardRef((props, ref) => {
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const currentDoc = useCurrentDoc()
  const currentDocRef = useRef()
  const handleChange = ev => {
    setQuery(ev.target.value)
  }
  useEffect(() => {
    if (ref.current && currentDocRef.current) {
      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
    }
  }, [])
  return (
    <>
      
        {props.open && }