I'm trying to measure a dynamic height for use in a virtualized list (react-virtualized). So on loading the image, I do the following:

const handleLoad = () => setLoading(false);

  useLayoutEffect(() => {
    if (isLoading) return;
    if (measure) measure();
  }, [isLoading]);

Triggered by the video tag:

<StyledVideo
          autoPlay
          loop
          muted
          playsinline
          onClick={handleClick}
          onLoadedMetadata={handleLoad}
          isLoading={isLoading}
          ref={videoRef}
        >
          <Sources {...{ domain, url, preview, media }} />
        </StyledVideo>

It works perfectly fine on desktop, but on mobile it is delayed (you can even see it loading, then adjust the height). How do I make it measure properly even on mobile?