Как сделать несколько выпадающих списков на ReactJS?

Question

[Alexander]

Здравствуйте, хочу сделать несколько выпадающих списков на React, как это можно сделать одним useState()?
Нужно чтобы при навидении на элемент открывался выпадающий список и на каждый элемент он должен иметь свой контент? У меня есть рабочий способ, но он требут рефакторинга

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>
    </>
  )
}