Can't add rows to table in react

I have a react component. In a useEffect I'm trying to create a new row and add the row to the table. I tried using insertRow, but that didn't work either. The element does exist and I am able to add a mousedown listener to it.

<!-- language: lang-js -->

const createRow = () => {
  const row = document.createElement("tr");
  for (let j = 0; j < 3; j++) {
    const td = document.createElement("td");
    row.appendChild(td);
  }
  return row;
};

<!-- end snippet -->

<!-- language: lang-js -->

useEffect(() => {
  if (id !== "-1") {
    const element = document.getElementById(id);
    element?.addEventListener("mousedown", () => {
      console.log("here");
    });

    const row = createRow();
    element?.append(row); // also tried appendChild
   // yes there should be a removeEventListener, but this is just to debug
  }
}, [id]);

<!-- end snippet -->

Your createRow function is working fine the problem is that you are creating three td and appending them to the created tr but those td are empty so the function is returning this :

<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

It is a table row with three empty table data, that's why it can't be observed, so with the same logic you have to append text to your td:

const createRow = () => {
    const row = document.createElement("tr");
    for (let j = 0; j < 3; j++) {
      const td = document.createElement("td");
       // add these two lines
      const content = document.createTextNode("Test");
      td.appendChild(content);
      row.appendChild(td);
    }
    return row;
  };

This will retun:

<tr>
  <td>Test</td>
  <td>Test</td>
  <td>Test</td>
</tr>

Note: This is vanilla Javascript, if you are using react, it is recommanded to use refs to manipulate DOM elements instead of getting them by id