¿Por qué estás usando esto en una función de flecha?

Prueba esto:

 import React from "react"; import ReactPlayer from "react-player"; let player; export const VideoPlayer = ({ endVideo, timePlayed, controls, playing, videoDuration }) => ( <div className="video-player"> <ReactPlayer ref={(ref) => { player = ref; }} url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4" playing={playing} // playing={true} controls={controls} onStart={() => player.seekTo(timePlayed)} onEnded={endVideo} /> </div> ); export const MemoizedVideoPlayer = React.memo(VideoPlayer);

Intente, configure la instancia con ayuda useState hook.

Envuelva los controladores en useCallback para evitar una nueva representación innecesaria, pero no se olvide de sus dependencias si aparecen.

No olvides mirar el repositorio de las bibliotecas que estás usando, a veces ayuda.

Además, mi consejo es leer sobre las funciones con más detalle.

Además, hice algunos pequeños cambios.

• El componente se llama reproductor de video. La propiedad de "videoDuration" se puede llamar "duración". Esto será más correcto y no perderemos en entender las propiedades transferidas.
• Url obtendría de props. Para apuntar la fuente al exterior y se reutilizó el componente.
• Cambió el nombre de la propiedad "endVideo" a "onEnded". Para mayor claridad, es decir, se llamará de manera similar al controlador al que transferimos al reproductor de reacción.

¡Empecemos!

 import React, { useState, useCallback } from "react"; import ReactPlayer from "react-player"; export const VideoPlayer = ({ url, onEnded, timePlayed, controls, playing, duration}) => { const [instance, setInstance] = useState(null); const handleStart = useCallback(() => { if (instance) { instance.seekTo(timePlayed) } }, [instance, timePlayed]) return ( <div className="video-player"> <ReactPlayer ref={setInstance} url={url} playing={playing} controls={controls} onStart={handleStart} onEnded={onEnded} /> </div> )};