How to prevent react-player from re-rendering when parent state changes in a Next.js dynamic import setup?

Question

I'm using the ReactPlayer component from react-player library within a dynamically imported MediaPlayer component in a Next.js application. Despite applying React.memo to the MediaPlayer component and memoizing the props, the ReactPlayer still re-renders when the parent component's state changes. How can I prevent these unnecessary re-renders?

Code Details: 1. MediaPlayer Component (defined in mediaPlayer.js):

import React from 'react';
import ReactPlayer from 'react-player';

const MediaPlayer = ({ playerRef, ...props }) => {
  return <ReactPlayer ref={playerRef} {...props} />;
}

export { MediaPlayer };

2. Dynamic Import in Parent Component:

import dynamic from 'next/dynamic';
import { memo, useMemo, useState } from 'react';

// Dynamically import MediaPlayer with SSR disabled
const MediaPlayer = dynamic(() => import('mediaPlayer').then(mod => mod.MediaPlayer), { ssr: false });
const MemoizedReactPlayer = memo(MediaPlayer);

3. Usage in Parent Component:

const ParentComponent = ({ data }) => {
  const [parentState, setParentState] = useState(0);

  // Memoize the props for MediaPlayer
  const mediaPlayerProps = {
    url: data.media.url,
    width: "100%",
    height: "100%",
    playing: data.enableAutoplay,
    muted: data.enableAutoplay,
    loop: data.enableLoop,
    controls: data.enableControls
  }

  return (
    <div>
      <button onClick={() => setParentState(parentState + 1)}>
        Change Parent State
      </button>
      <MemoizedReactPlayer {...mediaPlayerProps} />
    </div>
  );
};

export default ParentComponent;

Despite using React.memo and useMemo, ReactPlayer re-renders whenever parentState changes. I want to prevent ReactPlayer from re-rendering unless its own props change. How can I achieve this? Is there something I'm missing or any other optimization I can apply?

What I've tried:

• Applying React.memo to the MediaPlayer component.
• Memoizing the props passed to MediaPlayer using useMemo.

Environment:

• Next.js
• react-player
• React 18+

Any help or guidance would be appreciated!