Targeting 1 Textfield to make its width larger - reactjs

Question

I have created a form where I am using mui textfields to build the form. I want my textField for the description to be double the width of all the other textFields.
How can I achieve this? To only target one of the textFields
I want to target the last textField in the form and I want that one to be double the width
Below is my code for my form:
import { makeStyles, TextField } from '#material-ui/core';
import { Formik, FormikHelpers } from 'formik';
const useStyles = makeStyles(() => ({
input: {
fontFamily: 'nunito, sans-serif',
color: 'black',
border: '1px solid #393939',
borderRadius: '5px',
marginBottom: '5px',
width: '300px',
padding: '7px',
},
}));
return (
<Formik
initialValues={initialValues}
validationSchema={editUserValidation}
validateOnBlur
validateOnChange={false}
onSubmit={_handleSubmission}
enableReinitialize
>
{({
handleSubmit,
isSubmitting,
values,
touched,
errors,
handleChange,
handleBlur,
handleReset,
}) => (
<form onReset={handleReset} onSubmit={handleSubmit} className="edit-form-body">
<div className="flex">
<TextField
id="firstName"
placeholder="First Name"
type="string"
value={values.firstName}
error={touched.firstName && !!errors.firstName}
helperText={touched.firstName ? errors.firstName : ''}
onChange={handleChange('firstName')}
onBlur={handleBlur('firstName')}
InputProps={{ className: classes.input }}
/>
<div className="mx-5" />
<TextField
id="lastName"
placeholder="Last Name"
type="string"
value={values.lastName}
error={touched.lastName && !!errors.lastName}
helperText={touched.lastName ? errors.lastName : ''}
onChange={handleChange('lastName')}
onBlur={handleBlur('lastName')}
InputProps={{ className: classes.input }}
/>
</div>
<div className="flex">
<TextField
id="email"
placeholder="Email"
type="email"
value={values.email}
error={touched.email && !!errors.email}
helperText={touched.email ? errors.email : ''}
onChange={handleChange('email')}
onBlur={handleBlur('email')}
InputProps={{ className: classes.input }}
/>
<div className="mx-5" />
<TextField
id="mobileNumber"
placeholder="Contact No."
type="string"
value={values.mobileNumber}
error={touched.mobileNumber && !!errors.mobileNumber}
helperText={touched.mobileNumber ? errors.mobileNumber : ''}
onChange={handleChange('mobileNumber')}
onBlur={handleBlur('mobileNumber')}
InputProps={{ className: classes.input }}
/>
</div>
<div className="w-full">
<TextField
id="description"
placeholder="Description"
type="string"
value={values.description}
error={touched.description && !!errors.description}
helperText={touched.description ? errors.description : ''}
onChange={handleChange('description')}
onBlur={handleBlur('description')}
InputProps={{ className: classes.input }}
multiline
maxRows={10}
minRows={5}
/>
</div>
<div className="flex justify-end">
<Button
isLoading={isSubmitting}
onClick={handleSubmit}
className="font-nunito font-bold edit-user-button mt-4"
>
SAVE
</Button>
</div>
</form>
)}
</Formik>
);
};