First time posting, so I hope my explanation will be clear.

I'm developing on React.js and I want to to include emojis to my editor but I have to click on emoji icon and select the emoji to integrate him inside my editor.

So, I need to store my selection to place the emoji at the good place. Here is an exemple that works the same, the selection should be stored only when changing the text area but if I select the title and I click on the button to log the selection, the last selection stored is the title

export default function App() {
  const [sel, setSel] = useState();
  const handleChange = () => {
    setSel(window.getSelection);
  };
  console.log(sel);

  return (
    <div className="App">
      <button
        onClick={() => {
          console.log(sel);
        }}
      >
        button
      </button>
      <h1>Title</h1>
      <p>Text</p>
      <textarea
        onChange={() => {
          handleChange();
        }}
      ></textarea>
    </div>
  );
}

If you want to run to run it, here is the codesandbox : https://codesandbox.io/s/heuristic-shape-u18vsh?file=/src/App.js:0-526

Thanks for the help :)