React, wait for DOM to update before unmounting?

I have a component that uses a js library. Since it's vanilla js I've added a bunch of dynamic eventListners that I want to remove when unmounting the component. I've set up a function to run on Blur or when clicking out side of the component so it would run document.getElementById and then clone that element and replace it. Right after that I update the state to let Parent component know to not render the component anymore so it unmounts.

What seems to be happening is the code to get, clone the element and replace it isn't happening right away and so the state to unmount is running and by the time the cloning and replacing happens the component i already unmounted so it cannot find that element in the DOM anymore. How can I can avoid this

const cleanUp = () => {
  const element = document.getElementById(id);
  const clone = element.cloneNode(true);
  element.parentNode.replaceChild(clone, element);

  setUnMount(true);
};