I am trying this for so long and it's not been working for 2 days now. Did some research but now I have no option other than to ask the community.

import { multiStepContext } from '../StepContext';
export default function BasicStep() {
  const {
    setStep,
    userData,
    setUserData,
    firstName,
    lastName,
    setfirstName,
    setlastName,
    username,
    title,
    cnicNo,
    gender,
    dob,
    referredBy,
    // country,
    cityId,
    state,
    profilePicture,
    setUsername,
    settitle,
    setcnicNo,
    setDob,
    // setCountry,
    // setState,
    setprofilePicture,
    setcityId,
    countryId,
    setcountryId,
    setreferredBy,
    stateId,
    setstateId,
    setGender
  } = useContext(multiStepContext);

  const {
    control,
    formState: { errors }
  } = useFormContext();

I want to add validation in a form like if nothing is entered the field goes red and ask for input.

<Controller
              control={control}
              name='firstName'
              rules={{
                required: true
                // type: 'email'
              }}
              render={({ field }) => (
    <TextField
                label='First Name'
                value={userData[firstName]}
                onChange={(e) => setfirstName(e.target.value)}
                margin='normal'
                defaultValue={userData[firstName]}
                fullWidth
                variant='outlined'
                {...field}
                error={errors.firstName}
              />

This is a multi-stepper form and the button is below

<Button onClick={() => setStep(2)} variant='contained' color='primary'>
          Next
        </Button>