Реагируйте: как сделать компоненты, вставленные опасно SetInner HTML?

Question

Если у меня есть обычная текстовая строка, куда я хочу вставить некоторые компоненты, какой будет правильный способ сделать это?

Пример кода, codesandbox

import React, { useRef } from "react";
import ReactDOMServer from "react-dom/server";

import "./styles.css";

export default function App() {
  const testID = () => {
    document.getElementById("myId").textContent = "gotcha!";
  };
  const testUSEREF = () => {
    myRef.current.textContent = "gotcha!";
  };

  const plain_text = "<div><myPlainDiv />hey</div>";
  const myRef = useRef();
  const newContent = plain_text.replace(/<myPlainDiv \/>/, str =>
    ReactDOMServer.renderToString(
      <div>
        <div id="myId">I am using ID</div>
        <div ref={myRef}>I am using USEREF</div>
      </div>
    )
  );

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: newContent }} />
      <button onClick={testID}>click me ID</button>
      <button onClick={testUSEREF}>click me USEREF</button>
    </div>
  );
}

Я могу получить доступ к ссылке с помощью getElementById, но если я хочу использовать myRef, как мне его использовать? И я должен использовать это?

---

РЕДАКТИРОВАТЬ: Это будет работать, но мне интересно, если это правильный путь, и в любом случае, почему использование простого JavaScript здесь не правильно?

import React, { useRef, useEffect } from "react";
import ReactDOMServer from "react-dom/server";
import ReactDOM from "react-dom";

import "./styles.css";

export default function App() {
  const testID = () => {
    document.getElementById("myId").textContent = "gotcha!";
  };
  const testUSEREF = () => {
    myRef.current.textContent = "gotcha!";
  };

  const plain_text = `<div>
  <div id="what"></div>
  <div>hey</div>
  </div>`;
  const myRef = useRef();
  const NewContent = () => (
    <div>
      <div id="myId">I am using ID</div>
      <div ref={myRef}>I am using USEREF</div>
    </div>
  );

  useEffect(() => {
    const container = document.getElementById("what");
    ReactDOM.render(<NewContent />, container);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: plain_text }} />
      <button onClick={testID}>click me ID</button>
      <button onClick={testUSEREF}>click me USEREF</button>
    </div>
  );
}