fix issue with Plyr.js and displayName

package-lock.json

@@ -16,7 +16,7 @@
         "next": "14.2.2",
         "next-intl": "3.11.3",
         "next-nprogress-bar": "2.3.11",
-        "plyr-react": "^5.3.0",
+        "plyr-react": "5.3.0",
         "react": "18.3.0",
         "react-cookie": "7.1.4",
         "react-dom": "18.3.0",

src/components/Layout/PlyrJS/index.tsx

@@ -20,7 +20,7 @@ const PlyrJS: React.FC<Props> = (props) => {
 
     const PlyrComponent = React.useMemo(() => {
         return dynamic(() => import("plyr-react").then(() => {
-            return React.forwardRef((props, ref) => {
+            const Comp = React.forwardRef((props, ref) => {
                 //@ts-ignore
                 const { source, options = null, ...rest } = props
                 //@ts-ignore
@@ -30,9 +30,15 @@ const PlyrJS: React.FC<Props> = (props) => {
                 })
                 return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
             })
+
+            Comp.displayName = 'PlyrComponent'
+
+            return Comp;
         }), { ssr: false });
     }, []);
 
+    PlyrComponent.displayName = 'PlyrComponent'
+
     const { data } = props;
 
     const plyrProps = {