React front end form not passing data to Node server?

Question

I am new to programming and am attempting to pass a form data (in a modal) from a Material UI/React front end to a Node/Express server, which in turn stores the data in a MySQL database. For some reason, my front end is not sending data to the server. My form component looks like this:

import React, { Component } from 'react';
import axios from 'axios';

class Create extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      daterange: '',
      description: '',
    };
  }

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    const { name, daterange, description } = this.state;

    const coin = {
      name,
      daterange,
      description,
    };

    axios
    .post('http://localhost:5000/add_coin', coin)
    .then(() => console.log('Coin entry created'))
    .catch(err => {
      console.error(err);
    });
};

render() {
  return (
    <div>
      <br />
      <div className="container">
        <form onSubmit={this.handleSubmit}>
          <div style={{ width: '30%' }} className="form-group">
            <input
              type="text"
              className="form-control"
              name="name"
              placeholder="Coin Name"
              onChange={this.handleInputChange}
            />
          </div>
          <br />
          <div style={{ width: '30%' }} className="form-group">
            <input
              type="text"
              className="form-control"
              name="daterange"
              placeholder="YYYY-MM-DD"
              onChange={this.handleInputChange}
            />
          </div>
          <br />
          <div style={{ width: '30%' }} className="form-group">
            <input
              type="text"
              className="form-control"
              name="description"
              placeholder='Description'
              onChange={this.handleInputChange}
            />
          </div>
          <br />
          <div style={{ width: '30%' }}>
            <button className="btn" type="submit" onSubmit={this.handleSubmit}>
              Create
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
}

export default Create;

This is mostly copied from this answer with some variables names changed to reflect my db.

My server.js looks like this:

const express = require('express');
const bodyParser = require('body-parser');
var connection  = require('express-myconnection'); 
var mysql = require('mysql');

const app = express(); 
app.use(bodyParser.json());
app.use(express.urlencoded({ extended: false }));

app.use(
  connection(mysql,{
      host: 'localhost', 
      user: 'me',
      password : 'fakepass',
      port : 3306,
      database:'agora'
  },'pool'));

app.get('/coins', function(req, res, next) {
    req.getConnection(function(err,connection){
        if(err) return next(err);
        connection.query('SELECT * FROM coins',function(err,rows){
            if(err) return next(err);
            res.send(rows);
        });
    });
});

app.post('/add_coin',function(req, res, next){
  let { name, daterange, description } = req.body;
  if(!name) return res.status(400).json("Name can't be blank");
  var data={ name : name,
            daterange : daterange,
            description : description };
  req.getConnection(function(err, connection){
    if(err) return next(err);
    connection.query("INSERT INTO coins set ? ", data, function(err, rows){
      if (err) return next(err);
      res.send(rows);
    });
  });
});

app.post('/remove_coin',function(req, res, next){
  let { ID } = req.body;
  if(!ID) return res.status(400).json("ID can't be blank");
  var data={ ID : ID };
  req.getConnection(function(err, connection){
    if(err) return next(err);
    connection.query("DELETE FROM coins WHERE ID = ?", data, function(err, rows){
      if (err) return next(err);
      res.send(rows);
    });
  });
});

app.listen(5000, ()=> {
  console.log('app is running on port 5000');
});

I am pretty certain the issue is not with the server (unless it's a parsing issue) since the server methods work properly with Postman and are passing the data to MySQL. Here is the db so far:

CREATE DATABASE agora;
USE agora;
CREATE TABLE coins (
    ID int NOT NULL AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    daterange VARCHAR(255),
    description VARCHAR(255),
    PRIMARY KEY (ID)
);

Thank you for any insight that can be provided.