Corrupt video uploads when chunking MediaRecorder to Google Cloud platform

I currently am using react hook powered component to record my screen, and subsequently upload it to Google Cloud Storage. However, when it finishes, the file created inside Google Cloud appears to be corrupt.

This is the gist of the code within my React component, where useMediaRecorder is from here: https://github.com/wmik/use-media-recorder -

let {
    error,
    status,
    mediaBlob,
    stopRecording,
    getMediaStream,
    startRecording,
    liveStream,
  } = useMediaRecorder({
    onCancelScreenShare: () => {
      stopRecording();
    },
    onDataAvailable: (chunk) => {
      // do the uploading here:
      onChunk(chunk);
    },
    recordScreen: true,
    blobOptions: { type: "video/webm;codecs=vp8,opus" },
    mediaStreamConstraints: { audio: audioEnabled, video: true },
  });

As data becomes available through this hook - it calls onChunk( chunk ) passing a binary Blob through to that method, to perform the upload, I tie in with this section of code to perform the upload:

 const onChunk = (binaryData) => {
    var formData = new FormData();
    formData.append("data", binaryData);
    let customerApi = new CustomerVideoApi();
    customerApi.uploadRecording(
      videoUUID,
      formData,
      (res) => {},
      (err) => {}
    );
  };

customerApi.uploadRecording looks like this (using axios).

const uploadRecording = (uuid, data, fn, fnErr) => {
    axios
      .post(endpoint + "/stream/upload", data, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then(function (response) {
        fn(response);
      })
      .catch(function (error) {
        fnErr(error.response);
      });
  };

The HTTP request succeeds, and all is well with the world: the server side code to upload is based on laravel:

// this is inside the controller.

 public function index( Request $request )
    {

            // Set file attributes.
            $filepath = '/public/chunks/';
            $file = $request->file('data');
            $filename = $uuid . ".webm"; 
          
            // streamupload
            File::streamUpload($filepath, $filename, $file, true);

            return response()->json(['uploaded' => true,'uuid'=>$uuid]);
      
    }

// there's a service provider used to create a new macro on the File:: object, providing the facility for appropriate handling the stream:

public function boot()
    {
        File::macro('streamUpload', function($path, $fileName, $file, $overWrite = true) {
            
            $resource = fopen($file->getRealPath(), 'r+');
           
            $storageClient = new StorageClient([
                'projectId' => 'myprjectid',
                'keyFilePath' => '/my/path/to/servicejson.json',
            ]);
            
            $bucket = $storageClient->bucket('mybucket');
            $adapter = new GoogleStorageAdapter($storageClient, $bucket);
            $filesystem = new Filesystem($adapter);

            return $overWrite 
                    ? $filesystem->putStream($fileName, $resource) 
                    : $filesystem->writeStream($fileName, $resource);
        });
    }

So to reiterate:

1. React app chunks out blobs,
2. server side determines if it should create or append in Google Cloud Storage
3. server side succeeds.

4) Video inside Google Cloud platform is corrupted.

However, the video file, inside the Google Cloud container is corrupted and won't play. I'm unsure exactly why it is corrupted, but my guesses so far:

1. Some sort of Dodgy Mime type problem.. - different browsers seem to handle the codec / filetype differently from the mediarecorder: e.g. Chrome seems to be x-matroska (.mkv?) - firefox different again.. Ideally I would have a container of .webm - notice how I set the file name server side, and it isn't coming from the client. Should it? I'm unsure how to force the MediaRecorder to be a specific mimeType - I thought the blobOptions option should do it, but changing the extension and mime type seems to have little to no impact on the corruption occurring.

2. Some sort of problem during upload where an HTTP request doesn't execute and finish in order - e.g.

1 onDataAvailable completes second
2 onDataAvailable completes first
3 onDataAvailable completes third

I've sort of ruled this out because I think the chunks should be small enough.

3. Some sort of problem with Google Cloud Storage APIs that I'm using, perhaps in the wrong way? Does the cloud platform support streaming, and does this library send the correct params to do so?

4. Some sort of problem with how I'm uploading - should the axios headers be multipart formdata, or something else?

This is the package I'm using for the Server side: https://github.com/Superbalist/flysystem-google-cloud-storage

Can anyone could shed any light on how to achieve this goal of streaming up into Google Cloud without the video from the mediarecorder being corrupted? Hopefully there's enough detail here in the question to help figure it out. The problem as illustrated isn't on getting the file as far as Google cloud, but rather the resulting file being unplayable in any video format.

Update

I've ordered my chunks client side now, and queued them properly before letting them reach the server. No difference to the output. As some have suggested - a single blob upload request works fine.

Tried using streamable config param (from reading source code it seems like chunks need to be a certain size before Google recognises them as a resumable upload

$filesystem = new Filesystem($adapter, [ 'resumable'=>true ]);

Not sure how: https://cloud.google.com/storage/docs/performing-resumable-uploads - is implemented within the libraries I'm using, (or within the Google Cloud APIs themselves if at all?). Do I need to implement that myself? Documentation is light on Google's part.