Element Not Updating in DOM After its React State is Changed

I have a react variable called dataTable managed with useState() that holds a table element, embedded in the HTML in my site as {dataTable}.

However, when I update it with setDataTable(), it’s value does change and I can check that with console.log(), but it doesn’t update in the DOM for some reason.

All other, more simple elements like number variables will update in the DOM when displayed in the same way.

I update the table with:

setDataTable(
  <DataTable
    todos={todos}
    todoLogs={todoLogs}
    deleteTodo={deleteTodo}
    toggleTodo={toggleTodo}
  ></DataTable>
)

The DataTable class looks like:

class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.todos = props.todos;
    this.todoLogs = props.todoLogs;
    this.deleteTodo = props.deleteTodo;
  }

  render() {
    const data = this.todoLogs;

    // Map over the data to generate table rows
    try {
      const tableRows = data.map((todoLog) => (
        <tr key={todoLog.id}>
          <td>{this.todos.find(x => x.id === todoLog.id).title}</td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d09_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d08_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d07_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d06_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d05_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d04_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d03_04_24}></input></td>
          <td><input type="checkbox" onChange={() => {this.todos.find(x => x.id === todoLog.id)}} checked={todoLog.d02_04_24}></input></td>
          <td><button><i className="material-icons" onClick={() => {this.deleteTodo(todoLog.id)}}>delete</i></button></td>
        </tr>
      ));

      return (
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>09/04</th>
              <th>08/04</th>
              <th>07/04</th>
              <th>06/04</th>
              <th>05/04</th>
              <th>04/04</th>
              <th>03/04</th>
              <th>02/04</th>
            </tr>
          </thead>
          <tbody>{tableRows}</tbody>
        </table>
      );
    } catch (error) {
      console.log(error);
      return <p>Table Loading...</p>;
    }
  }
}

Is there something special about updating React components, or HTML elements with parameters that I don’t know?

Thank you.