How to change data in a cloned table?

I have a table in which users can add some text to a table, I have cloned a table using useRef.

Live demo: live deom

Expectation:

I want if the user entered new texts in a table I want the cloned table to have predefined text instead of entered by a user but the original table should have the newly entered text by the user

Here is what I have tried

import React, { useState, useEffect, useRef } from "react";

export default function App() {
  const tableRef = useRef(null);
  const clonedTableRef = useRef(null);
  const [disclaimer, setDisclaimer] = useState();
  const [signoff, setSignOff] = useState();

  useEffect(() => {
    handleCopyTable();
  }, [disclaimer, signoff]);

  const handleCopyTable = () => {
    clonedTableRef.current.innerHTML = tableRef.current.innerHTML;
  };

  if (disclaimer) {
    console.log("ggggg", disclaimer);
    clonedTableRef.current.querySelector("#disclaimer").innerText =
      "Predifined Text for disclaimer";
  }

  if (signoff) {
    console.log("ggggg", signoff);
    clonedTableRef.current.querySelector("#signoff").innerText =
      "Predifined Text for signoff";
  }

  return (
    <div className="App">
      <div className="disclaimer-box">
        <textarea
          placeholder="Type your characters here"
          onChange={(e) => setDisclaimer(e.target.value)}
          rows="3"
          cols="30"
        ></textarea>
        <button>Add Disclaimer</button>
      </div>
      <div className="signoff-box">
        <textarea
          placeholder="Type your characters here"
          onChange={(e) => setSignOff(e.target.value)}
          rows="3"
          cols="30"
        ></textarea>
        <button>Add signoff</button>
      </div>

      <h1>Original table </h1>
      <div ref={tableRef} className="table">
        <table width="500" cellPadding="0" cellSpacing="0" border="0">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr
              style={{
                fontSize: "8px",
                fontFamily: "Verdana",
                color: "#fff",
                lineHeight: "10px",
                paddingTop: "10px",
                backgroundColor: "red"
              }}
            >
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>Mark</td>
              <td>Otto</td>
            </tr>
            <tr style={{ margin: "20px" }}>
              <td id="disclaimer" style={{ padding: "20px" }}>
                Disclaimer : {disclaimer}{" "}
              </td>
              <td id="signoff" style={{ padding: "20px" }}>
                signoff : {signoff}{" "}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <h1>Cloned Table</h1>
      <div ref={clonedTableRef} className="table"></div>
    </div>
  );
}

Problem: When a user enters new text in a table the cloned table shows the new text instead of predefined text, any suggestion on what is wrong here?