React: how to make sure content is loaded and has scrollHeight and client height

I have the next code – useMemo calculates if container is ready, but in fact when container appears it returns false, is there any way to do it?

  const containerReady = useMemo(() => {
    const scrollHeight = messagesContainer.current?.scrollHeight;
    const clientHeight = messagesContainer.current?.clientHeight;

    if (!scrollHeight || !clientHeight) return false;

    return true;
  }, [
    messagesContainer.current?.scrollHeight,
    messagesContainer.current?.clientHeight,
  ]);

  console.log("Container ready:", containerReady);