How to get the number of rendered ul child elements on when rendering element during map function, and on adding elements using mutation observer? , I am linking a code sandbox, please check the code before pressing add the add is causing the browser to freeze, in this particular case I want to console log 4 items when the app is rendered in the singular count, in other words, I want to keep track no how the list is expanding and how many elements are getting into it. the issue is the observer seems to be failing to run for some reason and if so it freezes the page. Please check the code before enabling the observable function it might crash your browser. the point here is to get the number of growing elements in real-time rather than after the list has been totally rendered due to some logic that needs to be implemented at a certain time rather than after the list is done rendering.

on first rendering log added 1 log added 2 log added 3 log added 4

after adding an item log added 5 and up

const onListMutation = useCallback(
    (mutationList) => {
      console.log(mutationList[0].target , `added${mutationList[0].target}`);
      setCount(mutationList[0].target.children.length);
    },
    [setCount]
  );