React: Uploading Files (Front-End)

Question

I am trying to make a file upload form (front-end), but I don't think my uploaded file is communicating with the initial values when submitting since only the dataset name and the contact email are changed when I try to submit the form.

Here is what the form looks like when I load the page:

I initially press submit to see what happens within the React console tools. The output looks like this Subscribe form values: {datasetName: "dataset.csv", contactEmail: "johndoe@example.com", uploadFile: "sample.csv"} which is expected.

I then change the name of the dataset, change the contact email, and choose a file.

Unfortunately, the output looks like this Subscribe form values: {datasetName: "newData.csv", contactEmail: "janedoe@example.com", uploadFile: "sample.csv"}. Notice how the uploadFile part is the same despite trying to change the values.

I am fairly new to React, and I am using Material UI to render some of the textfields and buttons. What am I missing here?

import React from 'react';
import { Form } from 'react-final-form';
import { TextField } from 'mui-rff';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Input from '@material-ui/core/Input';
import { FormControl } from '@material-ui/core';

import axios from 'axios';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2)
  },
}));

const onSubmit = async values => {
  console.log('Subscribe form values:', values);
};

const validate = values => {
  const errors = {};
  if (!values.datasetName) {
    errors.datasetName = 'Required';
  }
  if (!values.contactEmail) {
    errors.contactEmail = 'Required';
  }
  if (!values.uploadFile) {
    errors.uploadFile = 'Required';
  }
  return errors;
};

const UploadForm = () => {
  const classes = useStyles(); 

  return (
    <div className={classes.root}>
      <Form
        onSubmit={onSubmit}
        initialValues={{ datasetName: 'dataset.csv', contactEmail: 'johndoe@example.com', uploadFile: 'sample.csv' }}
        validate={validate}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Grid 
              container
              justify="center"
              alignItems="center"
              spacing={2}>

              <Grid item xs={12}>
                <TextField
                  label="Dataset Name"
                  name="datasetName"
                  margin="none"
                  required={true}
                />
              </Grid>

              <Grid item xs={12}>
                <TextField
                  label="Contact Email"
                  name="contactEmail"
                  margin="none"
                  required={true}
                />
              </Grid>

              <Grid item xs={12}>
                <FormControl>
                  <Input 
                    name='uploadFile'
                    type='file'
                    required={true}
                    />
                </FormControl>
              </Grid>

              <Grid item xs={12}>
                <Button
                  variant="contained"
                  color="primary"
                  type="submit"
                  disabled={submitting}
                >
                  Submit
                </Button>
              </Grid>
            </Grid>
          </form>
        )}
      />
    </div>
  );
}

export default UploadForm;

Imports:

import React from 'react';
import { Form } from 'react-final-form';
import { TextField } from 'mui-rff';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Input from '@material-ui/core/Input';
import { FormControl } from '@material-ui/core';
import axios from 'axios';