My web player shows nothing when generating a blob URL in React

Question

Honestly I'm not very good with this and I don't know how to solve it.

I want to make a video and movie player. I am using the blob urls in a react function. My problem is that the player keeps showing nothing or loading all the time. The video shows when I restart the server, but if I try to refresh the page it just doesn't do anything.

I have used Chat-GPT to generate that function because I don't have much knowledge of JavaScript.

Note: I am using video-react player I attach the function from the eBlob.jsx file:

import React, { useState, useEffect } from 'react';

const eBlob = (videoUrl) => {
  const [videoObjectURL, setVideoObjectURL] = useState('');

  useEffect(() => {
    let isMounted = true;

    const loadVideo = async () => {
      try {
        // Verificar si ya se cargó la URL de objeto para evitar volver a cargarla.
        if (videoObjectURL) {
          return;
        }

        // Obtener el video como Blob desde la URL proporcionada.
        const response = await fetch(videoUrl);
        const videoBlob = await response.blob();

        // Convertir el Blob en una URL de objeto para el video.
        const objectURL = URL.createObjectURL(videoBlob);

        if (isMounted) {
          setVideoObjectURL(objectURL);
        }
      } catch (error) {
        console.error('Error loading video:', error);
      }
    };

    loadVideo();

    // Limpieza: Revocar la URL de objeto cuando el componente se desmonta.
    return () => {
      isMounted = false;
      if (videoObjectURL) {
        URL.revokeObjectURL(videoObjectURL);
      }
    };
  }, [videoObjectURL, videoUrl]); // Dependencias actualizadas.

  return videoObjectURL;
};

export default eBlob;