Partial Address Form with error and helperText

partial_addressForm.js

function AddressForm(props) {
	const { state, handleChange } = props;

	return (
		<Fragment>
			<Typography variant="h6" gutterBottom>
				Shipping address
      		</Typography>
			<Grid container spacing={24}>
				<Grid item xs={12} sm={6}>
					<TextField
						required
						id="firstName"
						name="firstName"
						label="First name"
						fullWidth
						autoComplete="fname"
						value={state.addressForm.firstName}
						onChange={handleChange('firstName', 'addressForm')}
						error={!state.validation.firstName}
						helperText={state.validation.errorTypes.firstName}
					/>