Как отобразить содержимое ячейки в модальном теле Bootstrap

Question

Цель:
При нажатии одной из ячеек в столбце Страна данные из ячейки должны отображаться в модальном теле (<div id="test" />).

Проблема:
Код не работает, и какую часть мне не хватает для достижения цели.

Информация:
* Новичок ie в reactjs.
* Использование реакции- bootstrap

Код Песочница:
https://codesandbox.io/s/silly-pine-1fs37
https://codesandbox.io/embed/silly-pine-1fs37

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import "./App.css";

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = e => {
    setShow(true);

    console.log(e.target.parentElement.childNodes[0].textContent);

    var ddd = document.getElementById("test");

    ddd.innerHTML = e.target.parentElement.childNodes[0].textContent;
    console.log(ddd);
  };

  return (
    <div>
      <br />
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <br />
      <br />

      <table border="1">
        <thead>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td onClick={handleShow}>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td onClick={handleShow}>Mexico</td>
          </tr>
          <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td onClick={handleShow}>Austria</td>
          </tr>
          <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td onClick={handleShow}>UK</td>
          </tr>
          <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td onClick={handleShow}>Canada</td>
          </tr>
          <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td onClick={handleShow}>Italy</td>
          </tr>
        </tbody>
      </table>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div id="test" />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default Example;