CODE EXAMPLE FOR HTML

can get input value from dangerouslysetinnerhtml

// main.js

const { useEffect, useState } = React;

const htmlData = {
  htmltag: `<div><p><input type="text" placeholder="Enter text here" /></p></div>`
};

const App = () => {
  const [data, setData] = useState('');
  
  const onKeyUp = event => {
    setData(event.target.value);
  }

  useEffect(() => {
    const divId = document.querySelector('#my-inputs');
    const input = divId.querySelectorAll('input');
    if (input && input.length > 0) {
      input[0].addEventListener('keyup', onKeyUp);
    }
  }, []);
  return <div><h3>HTML Generated:</h3><div
        id="my-inputs"
        dangerouslySetInnerHTML={{ __html: htmlData.htmltag }}
      /><hr /><h3>Result:</h3><code>{JSON.stringify(data)}</code></div>
}

ReactDOM.render(<App />, document.getElementById('root'));