How to validate material-ui select with Formik and Yup

I just started with Yup and Formik. I have a pretty basic form. The TextFields that I have are working just fine in terms of validation with Yup. The select is what I am having trouble with. I've been trying to get it to be required just like my text fields. I have been googling for awhile but I haven't found anything that has helped thus far.

I tried making my own validation that happened onBlur and that worked, but when it came to just trying to save without filling any values in it failed. The text fields would show required, but the select wouldn't show anything. You could fill out the text fields and try to save again. Doing that would show the required message for the select now because it could submit. From what I can tell formik's submit doesn't happen until all the Yup required fields are good to go. I will post what I am trying below, any help would be appreciated.

If I comment out the Yup validation requirements and log out the values on submit, the selected value does show up, so that seems to be working at least. Just can't figure out how to validate it.

import React, { useEffect, useState } from "react";
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { TextField, Select } from "formik-material-ui";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import MenuItem from "@material-ui/core/MenuItem"

const Validation = Yup.object().shape({
    FirstName: Yup.string().required("Required"),
    LastName: Yup.string().required("Required"),
    Gender: Yup.string().required("Required"),
});

<Formik
        onSubmit={(values) => {
             SaveSettings(values)
        }}
        enableReinitialize
        validateOnChange={false}
        initialValues={data}
        validationSchema={Validation}
    >
        {({ submitForm, handleChange }) => (
            <Form>
                    <Field
                        component={Select}
                        name="Gender"
                        variant="outlined"
                        label="Gender"
                        className={classes.formControl}
                        onChange={e => handleChange(e)} >
                             <MenuItem value="Male">Male</MenuItem>
                             <MenuItem value="Female">Female</MenuItem>
                    </Field>

                    <Grid item>
                    <Field
                        disabled={false}
                        component={TextField}
                        data-id="FirstName"
                        variant="outlined"
                        label="First Name"
                        className={classes.formControl}
                        name="FirstName" />
                    </Grid>

                    <Grid item>
                    <Field
                        disabled={false}
                        component={TextField}
                        data-id="LastName"
                        variant="outlined"
                        label="Last Name"
                        className={classes.formControl}
                        name="LastName" />
                    </Grid>

                    <Grid item>
                        <Button type="button" variant="contained" onClick={submitForm}>Save settings</Button>
                    </Grid>
            </Form>
        )}
    </Formik>