He intentado esto durante tanto tiempo y no ha estado funcionando durante 2 días. Investigué un poco, pero ahora no tengo otra opción que preguntarle a la comunidad.

 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();

Quiero agregar validación en un formulario como si no se ingresara nada, el campo se vuelve rojo y solicita información.

 <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} />

Este es un formulario de varios pasos y el botón está debajo

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