I want, when clicking on the three-dot menu, it appears only one menu, but I'm getting all the menus after mapping my array. The first picture is my result, and the second picture is the result I'm looking for. 1: https://i.stack.imgur.com/TC9tY.png 2: https://i.stack.imgur.com/J52ep.png

Here's my code:

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