Using React router link inside template string does not working

Question

I am trying to use Link of react router inside a template string with no success. i tried also to wrap the tag with ${} but that doesnt work either.

does anyone know how can i make it work?

  const getWorkFeed = () => {
    const tableBody = document.getElementById("tableBody");
    firestore
      .collection("WorkFeed")
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          tableBody.innerHTML += `<tr>
          <th scope="row">${doc.data().WorkType}</th>
          <td>${doc.data().Location}</td>
          <td>${doc.data().Date}</td>
          <td>${doc.data().WorkingHours}</td>
          <td>${doc.data().Payment}</td>
          <td>
          <Link
          to={{
            pathname:"/WorkPage/${doc.id}",
            docProps:${doc.id}
          }}
          className="btn btn-success btn-lg mr-2"
          role="button">
          Click
          </Link>
          </td>
        </tr>`;
        });
      });
    return tableBody;
  };