Safari browser and iPhone not displaying video thumbnail

I’m facing an issue where the video thumbnail is not displaying in Safari browser in mobile view or not showing iPhones as well. The thumbnail shows up perfectly on Android phones and Windows browsers, but not on Safari.

I want to display the thumbnail from 30 seconds into the video without using the poster attribute or enabling autoplay. Here’s the code I’m using:

{isSafari ? (
  <video
    ref={playerRef}
    playsInline={false}
    muted={true}
    autoPlay={false}
    loop={false}
    controls={false}
    preload='metadata'
    width='100%'
    height='100%'
    className='pointer-events-none h-full w-full select-none overflow-hidden object-cover'>
    <source src={`${parseUrlFromModel(data)}#t=0.001`} type='video/mp4' />
  </video>
) : (
  <video
    ref={playerRef}
    src={parseUrlFromModel(data)}
    width='100%'
    height='100%'
    preload='metadata'
    muted={isMuted}
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      objectFit: 'cover',
    }}
  />
)}

const getDefaultStartTime = () => {
  if (timeStamps && timeStamps.length >= 3) {
    return timeStringToSeconds(timeStamps[2].startTime) + 30;
  } else {
    return duration / 2;
  }
};

useEffect(() => {
  const startTime = getDefaultStartTime();
  if (playerRef.current) {
    playerRef.current.currentTime = startTime;
    playerRef.current.onloadeddata = () => {
      captureThumbnail(startTime);
    };
  }
}, [timeStamps]);

const captureThumbnail = () => {
  try {
    const canvas = document.createElement('canvas');
    canvas.width = playerRef.current.videoWidth;
    canvas.height = playerRef.current.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(playerRef.current, 0, 0, canvas.width, canvas.height);
    setThumbnailUrl(canvas.toDataURL());
    console.log('thumb' + thumbnailUrl);
  } catch (error) {
    return error;
  }
};

const isSafariBrowser = /^((?!chrome|android).)*safari/i.test(
  navigator.userAgent
);
setIsSafari(isSafariBrowser);
console.log('Safari browser ' + isSafariBrowser);

I verified that the thumbnail is generated correctly on other devices and browsers.
I ensured that the video is loading and the currentTime is set correctly.
I tried different approaches for detecting Safari, but the issue persists.

Expected: The thumbnail should display for the video in Safari on iPhones.
Actual: The thumbnail does not appear, but works fine on other browsers and devices.