video-react player blacks out after refreshing 5-6 times

Question

I'm using video-react library for playing video in my web-application. The issue I'm issue here is when I refresh the page multiple times (in my case it was 5-6 times), the video player keeps buffering for a few seconds and then displays a black screen. Even after clicking on the play button it doesn't work. If we refresh this page again for any number of times it still blacks out. Only after opening the url in a new page it works.

Below is my code. Here I have used a dummy link for the source, i'm using videos which are uploaded on AWS S3 bucket, which is just a buffer which was uploaded to S3. That issue is only appearing in the videos uploaded on S3.

import React from 'react';
import { Player, BigPlayButton } from 'video-react';
import 'video-react/dist/video-react.css';

export default function App() {
  return (
    <div>
      <Player preload="metadata">
        <BigPlayButton position="center" />
        <source
          src={
            'https://test-video-stack.s3.us-west-1.amazonaws.com/1709725750194.webm#t=180'
          }
          width="100%"
        />
      </Player>
    </div>
  );
}

Reason for using t=180 is because the videos that i'm working on are max 180 seconds. If I do not add this then the duration of the video doesn't show up. I cannot seek through the video.

I have tried adding video preload="metadata" and preload="auto" but it didn't work. Duration was showing as infinite every time.

Although if I remove t=180, the blackout issue doesn't come. But that results in not displaying the total duration of the video and I cannot seek through it.

What I'm expecting is, the black screen should not appear and total duration should be there.