trying to pipe multiple streams to client player, only first stream plays

[Nitzahon]

I have a gridfs bucket of video files, using the following server function, I can easily play any single video on my player of choice (react-player)

const fetchVideoStream = async (req, res) => {
    try {
      gfs.find({ _id: mongoose.Types.ObjectId(req.params.id) }).toArray((err, files) => {
        if (!files[0] || files.length === 0) {

          return res.status(200).json({
            success: false,
            message: "No files available",
          });
        }
        if (files[0].contentType === 'video/mkv' || files[0].contentType === 'video/webm') {
          // render video to browser
          gfs.openDownloadStream(mongoose.Types.ObjectId(req.params.id)).pipe(res);
        } else {
          res.status(404).json({
            err: "Not an image",
          });
        }
      });
    }
    catch (error) {
      res.status(400).json({
        err: error,
        success: false
      })
    }
  };

what I'm trying to do, is to play multiple files one after the other in the following function:

  const fetchMultiStream = async (req, res) => {
    try {
      let streams = [];
      const recordingId = req.params.id;
      let container;
      let ids;
      try {
        container = await Recordings.findById(recordingId); //The file ids are stored in a container for just such reference needs
        ids = container.recording.map((record) => mongoose.Types.ObjectId(record.id));
      } catch (error) {
        return res.status(500).json({
          message:
            "getting file Ids failed, please make sure you have the correct recordingsId.",
        });
      }
      try {
        gfs.find({ '_id': { $in: ids } }).toArray((err, files) => {
          if (!files[0] || files.length === 0) {
            return res.status(200).json({
              success: false,
              message: "No files available",
            });
          }
          files.forEach(file => {
            if (file && (file.contentType === 'video/mkv' || file.contentType === 'video/webm')) {
             let stream =  gfs.openDownloadStream(file._id)
             streams.push(stream);
            }
          })
          new MultiStream(streams).pipe(res);
        });
      } catch (error) {
        console.log(error)
      } 
    } catch (error) {
      console.log(error)
    }
  }

However, when I try to stream a video using this function only the first video seams to playback, and then there is some odd audio scrunching, like code is trying to shove all the remaining data left to play at the end of the first playback