Взять значения индекса массива в событии onClick

как написать событие onClick в моем приложении для реагирования, чтобы получить индекс массива в этом коде? Я просто хочу получить индекс массива в качестве вывода

Это мой массив в файле JSON.

{
        "Women": [
            {
                "id"  : 1,
                "name"  : "See All",
                "children" : [""]
            },
            {
                "id"  : 2,
                "name"  : "Clothes",
                "children" : [ "Coats & jackets" , "Suits & blazers" , "Skirts"]
            },
            {
                "id"  : 3,
                "name"  : "Shoes",
                "children" : [ "Boots" , "Flats" , "Ankle boots"]
            },
            {
                "id"  : 4,
                "name"  : "Bags",
                "children" : [ "Handbags" , "Backpacks" , "Clutches"]
            },
            {
                "id"  : 5,
                "name"  : "Accessories",
                "children" : [ "Jewelry" , "Belts" , "Scarves & Shawls"]
            },
            {
                "id"  : 6,
                "name"  : "Beauty",
                "children" : [ "Make Up" , "Face Care" , "Hand Care"]
            }
        ]
}

Это мой импорт массива

const Women = AdminCatData.Women.map ((data) => {
    
  return(
    { 
      ...data,
    }
  )
  }

)

Это выход массива женщин

{/*Women Tab*/}
            <Tab.Panel
              className = {({ selected }) =>
              classNames(
                'w-full py-2.5 text-sm leading-5 font-medium text-black rounded-lg', 
                'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-red-400 ring-white ring-opacity-60', 
                selected ? 'bg-white shadow' : 'text-white hover:bg-white/[0.12] hover:text-white'
              )
            }
            >

            <div className='grid grid-cols-3'>
              <ul className='col-span-1 mr-4'>
                {Women.map((item, index) => (
                  <ul>
                    <li className = "relative p-3 rounded-md hover:bg-coolGray-100">
                      <h3 className = "text-sm font-medium leading-5">
                        {item.name}
                      </h3>

                    <ul className = "flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500">
                      <li>Sub Categories </li>
                      <li>{item.children.join(' ')}</li>
                    </ul>

                    <a
                      href = "#"
                      className = {classNames(
                        'absolute inset-0 rounded-md',
                        'focus:z-10 focus:outline-none focus:ring-2 ring-red-400'
                      )}
                      key = {item.id} onClick = {() => console.info(index)}
                    />
                  </li>
                
                  </ul>
                ))}
                <button type = "button" 
                        class = " content-center 
                                text-white bg-red-400 
                                hover:bg-red-300 font-medium 
                                rounded-none text-sm px-5 py-2.5 
                                text-center mr-2 mb-2 dark:bg-red-400 
                                dark:hover:bg-red-400"
                        onClick = {() => setshowPopUp(true)}
                > Add new Category
                </button>
                </ul>

                <ul className='col-span-2 mr-4'>
                {Women.map((data) => (
                  <ul>
                    <li className = "relative p-3 rounded-md hover:bg-coolGray-100">

                    <ul className = "flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500">
                      <li>Sub Categories </li>
                      <li>{data.children.join(' ')}</li>
                    </ul>

                    <a
                      href = "#"
                      className = {classNames(
                        'absolute inset-0 rounded-md',
                        'focus:z-10 focus:outline-none focus:ring-2 ring-red-400'
                      )}
                    />
                  </li>
                
                  </ul>
                ))}
                <button type = "button" 
                        class = " content-center 
                                text-white bg-red-400 
                                hover:bg-red-300 font-medium 
                                rounded-none text-sm px-5 py-2.5 
                                text-center mr-2 mb-2 dark:bg-red-400 
                                dark:hover:bg-red-400"
                        onClick = {() => setshowPopUp(true)}
                > Add new Subcategory
                </button>
                </ul>

              </div>

            </Tab.Panel>
{/* End Women Tab */

}

Вывод вкладки "Женщины" В настоящее время я получаю такой вывод.

Вкладка «Женщины» ожидает вывода Мне нужен такой вывод