Динамическая загрузка видео с localhost и получение 206 частичного содержимого

Я использую простой стек react с redux. Затем я динамически извлекаю данные с местоположениями видео с google spreadsheet, это означает, что мне нужно импортировать видеофайлы на лету:

//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});

Это также означает, что видеоресурсы загружаются сразу после рендеринга компонента, но как обещание:

Затем он будет загружен в компонент, и когда придет время, отобразить видео (чтобы у нас были ресурсы, доступные в теге html5video при инициации в элементе:

      <div className = "outVideo">
        {outVideo !== "" &&
          <video
            ref = {this[`outVideo${reference}`]}
            autoPlay = "autoplay"
            playsInline = "playsinline"
          >
            <source
              src = {outVideo}
              type = "video/mp4"/>
          </video>
        }
      </div>

Я только что переключился с файлов 800kb на файлы 95mb, и, хотя я их опишу, мне любопытно, почему видео просто отображаются как white space, а видео нет:

Насколько я понимаю, не следует использовать 206