Wait for dynamic content to populate dom in react

I am trying to detect when a list has been fully populated with items so I can scroll to a specific one in React.

I've tried using setTimeout and requestAnimationFrame to delay the execution but both seemed hacky... Use effect hook also doesn't work because it runs prior to the dom actually being repainted.

Heres what I have so far:

 const observer = new MutationObserver(mutationList => {
    console.log(mutationList);

    if (listRef.current) {
      if (listRef.current?.contains(searchedItemRef.current)) {
        console.log('Found Node');
        console.log(searchedItemRef.current);
        searchedItemRef.current!.scrollIntoView({ block: 'center' });
      }
    }
  });

  useEffect(() => {
    if (listRef.current)
      observer.observe(listRef.current, {
        childList: true,
        subtree: true,
      });
  }, [props.activeChatChannel]); //some global state that represents chat data