React Final Form Material UI creating double lines on input field - reactjs

Question

I have a strange thing happening where I can't really figure out what is creating those double input field lines in my code (see the picture). I have literally copied the code from the official website (React Final Form) and it doesn't seem to be happening there. Does it have something to do with the browser compatibility?
My code:
import React from 'react';
import { Form } from 'react-final-form';
import {
TextField,
Select,
} from 'mui-rff';
import {
Grid,
Button,
MenuItem,
} from '#material-ui/core';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#008080',
},
}
})
const onSubmit = async values => {
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
await sleep(300);
window.alert(JSON.stringify(values, 0, 2));
};
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
}
if (!values.lastName) {
errors.lastName = 'Required';
}
if (!values.email) {
errors.email = 'Required';
}
return errors;
};
const formFields = [
{
size: 6,
field: (
<TextField
label="First Name"
name="firstName"
margin="none"
required={true}
/>
),
},
{
size: 6,
field: (
<TextField
label="Last Name"
name="lastName"
margin="none"
required={true}
/>
),
},
{
size: 12,
field: (
<TextField
type="email"
label="Email"
name="email"
margin="none"
required={true}
/>
),
},
{
size: 12,
field: <TextField name="notes" multiline label="Notes" margin="none" />,
},
{
size: 12,
field: (
<Select
name="city"
label="Select a City"
formControlProps={{ margin: 'none' }}
>
<MenuItem value="London">London</MenuItem>
<MenuItem value="New York">New York</MenuItem>
<MenuItem value="Tallinn">Tallinn</MenuItem>
</Select>
)
}
];
const FinalForm = () => {
return (
<div className="col s12 m6">
<div className="card-panel grey lighten-3">
<h5>Please fill out this form</h5>
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, form, submitting, pristine }) => (
<form onSubmit={handleSubmit} noValidate>
<Grid container alignItems="flex-start" spacing={2}>
{formFields.map((item, idx) => (
<Grid item xs={item.size} key={idx}>
{item.field}
</Grid>
))}
<Grid item style={{ marginTop: 16 }}>
<Button
type="button"
variant="contained"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</Button>
</Grid>
<Grid item style={{ marginTop: 16 }}>
<ThemeProvider theme={theme}>
<Button
variant="contained"
type="submit"
color='primary'
disabled={submitting}
>
Submit
</Button>
</ThemeProvider>
</Grid>
</Grid>
</form>
)}
/>
</div>
</div>
)
};
export default FinalForm;