How to make multiple dropdown lists in ReactJS?

Question

React

Hello, I want to make several dropdown lists in React, how can I do it with one useState()?
It is necessary that when hovering over an element, a drop-down list opens and for each element it must have its own content? I have a working method, but it requires refactoring

import React from 'react'
import { LBar, LBarMenu, LBarMenuItem, LBarMenuLink, LBarMenuModal } from './leftbar.style'

export const Leftbar = () => {
  const [isOpen, setIsOpen] = React.useState<'kids' | 'women' | 'men' | null>()
  const onMouseKidsEnter = () => {
    setIsOpen('kids')
  }

  const onMouseWomenEnter = () => {
    setIsOpen('women')
  }

  const onMouseMenEnter = () => {
    setIsOpen('men')
  }

  const onMouseLeave = () => {
    setIsOpen(null)
  }

  return (
    <>
      <LBar>
        <LBarMenu>
          <LBarMenuItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave}>
            Kids
          </LBarMenuItem>
          <LBarMenuItem onMouseOver={onMouseWomenEnter} onMouseLeave={onMouseLeave}>
            Women
          </LBarMenuItem>
          <LBarMenuItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave}>
            Men
          </LBarMenuItem>
        </LBarMenu>
      </LBar>
      <LBarMenuModal isOpen={isOpen === 'kids'}>
        <h1>kids</h1>
      </LBarMenuModal>
      <LBarMenuModal isOpen={isOpen === 'women'}>
        <h1>women</h1>
      </LBarMenuModal>
      <LBarMenuModal onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
        <LBarMenuLink to='men/lifestyle'>Lifestyle</LBarMenuLink>
        <LBarMenuLink to='men/running'>Running</LBarMenuLink>

        <LBarMenuLink to='men/basketball'>Basketball</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Jordan</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Training & Gym</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Golf</LBarMenuLink>
        <LBarMenuLink to='men/lifestyle'>Track & Field</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Skateboarding</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Tennis</LBarMenuLink>

        <LBarMenuLink to='men/lifestyle'>Sandals & Slides</LBarMenuLink>
        <LBarMenuLink to='men/lifestyle'>Shoes $100 & Under</LBarMenuLink>
        <LBarMenuLink to='men/lifestyle'>All Shoes</LBarMenuLink>
      </LBarMenuModal>
    </>
  )
}