Quiero, al hacer clic en el menú de tres puntos, aparece solo un menú, pero obtengo todos los menús después de mapear mi matriz. La primera imagen es mi resultado, y la segunda imagen es el resultado que estoy buscando. 1 : https://i.stack.imgur.com/TC9tY.png 2 : https://i.stack.imgur.com/J52ep.png

Aquí está mi código:

 {ClientsData.map((u, index) => ( <tr id={`element-${index}`} className={u.checked ? 'user active' : 'user'} key={u.id}> <td className="input-check"> <input type="checkbox" className="checkbox" /> </td> <td>{u.email}</td> <td>{u.societe}</td> <td>{u.matriculeFiscale}</td> <td>{u.categorie}</td> <td>{u.reglement}</td> <td className={u.statut === 'Bloqué' ? 'user-status' : 'user-status activé'}> {u.statut} </td> <td className="last-user-element"> <Link to={`/admin/users/user_details/${u.id}`} className="link-user"> <icons.BsEye className="see-user" /> </Link> <div className="contain"> <icons.BsThreeDotsVertical onClick={() => { setOpenDropdown(!openDropdown); setIndice(u.id); setIndexUser(index); }} className="user-option" key={u.id} /> {openDropdown && <UsersModalOptions />} </div> </td> </tr> ))}