Unresponsive upload button React.js & Node.js Build

My app is a simple video server: https://dronesinhawaiivideoserver.netlify.app/signIn

After deploying the front-end on Netlify & Back-End onto Heroku I am able to log in (after signing up) and view the homepage. One of the features that you can perform is a video upload which is currently unresponsive. Console shows no errors upon Click and Network shows xhr in pending status. enter image description here

My Upload.js

const express = require('express');
const router = express.Router();
const multer = require('multer');

const thumbnailGenerator = require('../helpers/videoThumbnail')
const port = require('../configs/default').port;

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, 'media/uploads');
    },
    filename: (req, file, cb) => {
      cb(null, file.originalname.replace(/ /g, '_'));
    }
  });

const upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 50 // 50MB
    }
});

router.post('/', upload.single('file'), (req, res, next) => {
    thumbnailGenerator.generateThumbnail(
        // /api/videos is made publically available in App.js
        "https://video-server-drones-in-hawaii.herokuapp.com/api/videos/" + req.file.filename.replace(/ /g, '_'), 
        req.file.filename.replace(/ /g, '_'),
        req.userData.firstName);
      res.status(200).json({
        message: 'Video upload successful'
      });
});

module.exports = router

What am I doing wrong?