Unmounting a component when triggered through parent component

Question

I have a parent component and child component. Child component will be rendered through parent based on a condition. So, when child gets rendered, all useEffect and other code gets executed and I'm able to achieve componentDidMount kind of methods. I'm not directly accessing child component but only use Parent to render it based on parent's props. Once my child component is visible, I call a method which resets 'doesChildExists' prop and re-render ParentComponent and since the condition is failed, ChildComponent is not rendered (unmounted). Once, ChildComponent is about to unmount, I need to do some stuff, but existing useEffect doesn't seem to get called. How do I handle this? Please help!!

Please, let me know if this is not the right approach, and I have handle rendering of child in a different way.

const ChildComponent: FunctionComponent<Props> = (props: Props) => {
    useEffect(() => {
       return () => {
            // handle unmount
       }
    }, []);
    return (
        <div class='textDiv'> 
           This is content
        </div>
    )

}

const ParentComponent: FunctionComponent<ParentProps> = (props: ParentProps) => {
      return (
          <>
               {doesChildExists &&
        createPortal(<ChildComponent />, document.body)}
          </>
      )
}