React Js MutationObserver | Detect Changes in Element

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

function App() {
      const [svgSize, setSvgSize] = useState('');
      const [svgHtml, setSvgHtml] = useState('');

useEffect(() => {
        const svgIcon = document.querySelector("#svg-icon svg");
        svgIcon.style.width = `${svgSize}em`;
        svgIcon.style.height = `${svgSize}em`;

setSvgHtml(svgIcon.outerHTML);

return (
        <div className="container">
          <h3>React Js MutationsObsever detect changes in element  </h3>
          <div className="svg-container" id="svg-icon">
            <svg viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34" />
            </svg>
          </div>
          <div className="slider-container">
            <input
              type="range"
              className="form-range"
              min="1"
              step=".1"
              max="10"
              id="svg-change-size"
              value={svgSize}
              onChange={(e) => setSvgSize(e.target.value)}
            />
          </div>
          <div className="col-sm-8">
            <div className="code-editor mt-3">
              <pre>
                <code className="language-css" id="code-editor">
                  {svgHtml}
                </code>
              </pre>
            </div>
          </div>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  
    .container {
      text-align: center;
      padding: 20px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      margin: 0 auto;
      max-width: 600px;
    }
  
    .svg-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      height: 100px;
    }
  
    svg {
      width: 100px;
      height: 100px;
      transition: fill 0.3s ease-in-out;
    }
  
    .slider-container {
      margin-top: 20px;
    }
  
    .form-range {
      width: 100%;
    }
  
    pre {
      font-family: "Courier New", Courier, monospace;
      overflow-x: auto;
      margin: 0;
      background-color: #333;
      border: 1px solid #555;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      line-height: 1.5;
      padding: 10px;
      white-space: break-spaces;
    }
  </style>
</body>

</html>