my function edits the data with the wrong index

Question

i have array of colors that i map function js on it, color is object with _id,name,code properties, when i want to get for example third index , onclick() give me first index and i dont know what happenning

{colors?.map((color) => (
                  <tr key={color._id} className="text-center">
                    <td>
                      <div
                        style={{
                          backgroundColor: `${color.code}`,
                        }}
                       
                      ></div>
                    </td>
                    <td>{color.name}</td>
                    <td>{color.code}</td>
                    <td>
                      <EditColorModal color={color} />
                    </td>
                  </tr>
 ))}

in modal bootstrap function

export default function EditColorModal(props) {
const [color, setColor] = useState({});

  const onSubmit = async () => {
    let id = color._id;

    await axios.patch(`/admin/color/${id}`, {
      name: "New Name",
      code: "New Code",
    });

    dispatch(adminActions.updateColor({ id, "New Name", "New Code"}));
  };
 return (
    <div>
      <button
        type="button"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#EditColorModal"
        onClick={() => setColor(props.color)}
      >
        <Edit />
      </button>
</div>

onClick get me the correct color and id on every indexes but into axios and redux , patch the very first color in colors array, Not the specific index I want,but i give to function the correct index