How to update a selected value in a drop down list without changing any component on the page?

I have a Draggable table component which has a drop down list of colors in the head, to change the table head background color. When I select a color, I can see the changes only after I drag the table. Can anyone help me change the color without dragging the component?

This is my code:

<Draggable onDrag={updateXarrow} onStop={updateXarrow}>
  <table>
    <thead>
      <tr style={{ background: table_colors[index].c[0] }}>
        <th colSpan="2">
          {tables[index]}
          {
            <select
              id={"color"+index}
              onChange={() => {
                let el = document.getElementById("color"+index);
                let color_index = parseInt(el.options[el.selectedIndex].text);
                console.log("color: "+color_index);
                table_colors[index].c[0] = colors[color_index - 1];
              }}
            >
              <option value="#A7D2CB">1</option>
              <option value="#F2D388">2</option>
              <option value="#C9BBCF">3</option>
              <option value="#6E85B7">4</option>
            </select>
          }
        </th>
      </tr>
    </thead>
    <tbody>
      {dataMap[index].map((ele) => (
        <tr id={ele.id}>
          <td>
            {ele.name}
            {ele.isPK ? " (PK)" : ""}
            {ele.isFK ? "(FK)" : ""}
          </td>
          <td>{ele.type}</td>
        </tr>
      ))}
    </tbody>
  </table>
</Draggable>

The colors and table_colors structure:

let colors = ["#6E85B7", "#C9BBCF", "#F2D388", "#A7D2CB"];
let table_colors = [
{
  c: ["#6E85B7"],
},
{
  c: ["#6E85B7"],
},
{
  c: ["#6E85B7"],
},
{
  c: ["#6E85B7"],
},

];