Как сделать изменение переменной по клику и ее передачу?

Хочу сделать отметку "Избранное", пробовал делать через useState, с ним у меня получилось, но менялись сразу все, а не одного элемента сейчас такой код

let bool = false;
  const handleChange = () => {
    bool = !bool;
    console.log(bool);
  };
  let res = users.map((item) => {
    return (
      <tr key={item._id}>
        <td>{item.name}</td>
        <td>
          {item.qualities.map((q) => (
            <span className={"badge mx-2 bg-" + q.color}>{q.name}</span>
          ))}
        </td>
        <td>{item.profession.name}</td>
        <td>{item.completedMeetings}</td>
        <td>{item.rate}/5</td>
        <td>
          <button onClick={() => handleChange()}>{Bookmark(bool)}</button>
        </td>

и второй файл где меняется заполнение кнопки

const Bookmark = (status) => {
  if (status === false) {
    return <i className="bi bi-bookmark"></i>;
  } else if (status === true) {
    return <i className="bi bi-bookmark-fill"></i>;
  }
};