React Component keeps rerendering causing video to restart

I am trying to render a video on a page with the following code. The name of the video is sent to the component from the previous page with match props and react router dynamic routing.

router.js

                   <LayoutRoute
                     path="/videos/:id"
                     render={matchprops => (
                        <Suspense>
                           <AccessControl>
                              <LazyVideoPage {...matchprops} />
                           </AccessControl>
                        </Suspense>
                     )}
                  />

videoList.js snippet

history.push(`/videos/${id}`, {
            name
        })

Currently the video is not able to play properly as it keeps restarting on every mouse move or page scroll. Using the componentDidUpdate lifecycle method it can be seen that the page rerendering is triggered by the match property, however this property is not changing at all.

I have investigated the middleware and can't see anything that may be tracking the mouse coordinates and causing the behaviour, nor have such features been purposely implemented. This behaviour is also only observed when logged into the app, even though there are no details about user log in used in the component.

videoPage.js

const VideoDisplay = ({videoId, location:{state:{name}}}) => {
    
    return (
        <Card className="main-card mb-3">
        <CardBody className="top-card-yellow">
            <CardTitle><h1>{name}</h1></CardTitle>

            <ReactHlsPlayer
                src={`https://hello-world.com/${videoId}/${videoId}.m3u8`}
                autoPlay={false}
                controls={true}
                width="100%"
                height="auto"
            />

        </CardBody>
    </Card>
    )
}

class VideoPage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            videoId: this.props.match.params.id,
        }
    }

    componentDidUpdate(prevProps, prevState) {
        Object.entries(this.props).forEach(([key, val]) =>
          prevProps[key] !== val && console.log(`Prop '${key}' changed`)
        );
        if (this.state) {
          Object.entries(this.state).forEach(([key, val]) =>
            prevState[key] !== val && console.log(`State '${key}' changed`)
          );
        }
      }


    render() {
        const { videoId } = this.state;
        const { location } = this.props;
        return (
            <Fragment>
                <Row>
                    <Col md="12">
                       <VideoDisplay videoId={videoId} location={location} />
                    </Col>
                </Row>
            </Fragment>
        );
    }
}



export default VideoPage;

react-router-dom is not currently on the latest version, so the useParams hook is not an option but this will be updated and could be used in the next sprint.

How do I go about fixing this behaviour so that the video can be viewed without being constantly restarted? Is there something I may have overlooked?