I'm using a MUI Stepper for my forms but the some of fields get the value when press next

Question

So im using and developing a form with the progress type of forms so the only problem here is the Barangay Fields and the Guardians Relationship

So this what it looks like

The problem here is not the barangay but the Guardian Relation the value of the barangay is being get by the guardian relationship so when i proceed to the family information it gets the data of the barangay how to stop this below are my code

Barangay Field

<MUI.Grid id="barangayGrid">
              <MUI.InputLabel htmlFor="barangay_name" id="barangayLabel">
                Barangay
              </MUI.InputLabel>
              <Controller
                name="barangay_name"
                control={control}
                defaultValue={scholarProfiles.barangay_name || ''}
                rules={{
                  required: selectedRegionCode === '130000000' ? false : 'Barangay is required',
                  validate: (value) => (selectedRegionCode === '130000000' || value !== '') || 'Please select a barangay',
                }}
                render={({ field }) => (
                  <MUI.FormControl sx={{ width: '100%', borderRadius: '8px' }}>
                    <MUI.Select
                      id="barangay_name"
                      native
                      {...field}
                    >
                      <option value="">Select Barangay</option>
                      {barangays.map((barangay) => (
                        <option key={barangay.name} value={barangay.name}>
                          {barangay.name}
                        </option>
                      ))}
                    </MUI.Select>
                  </MUI.FormControl>
                )}
              />
              {errors.barangay_name && (
                <p id="errMsg">
                  <MUI.InfoIcon className="infoErr" />
                  {errors.barangay_name?.message}
                </p>
              )}
            </MUI.Grid>

Guardian Relation Field

  <MUI.Grid id="relationToScholarGrid">
              <MUI.InputLabel htmlFor="relation_to_scholar" id="relationToScholarLabel">Guarduan Relation</MUI.InputLabel>
              <Controller
                name='relation_to_scholar'
                control={control}
                defaultValue={scholarFamMembers.relation_to_scholar || ""}
                rules={{
                  required: 'Relation to scholar is required',
                  validate: (value) => value !== '' || 'Please select a relation to scholar'
                }}
                render={({ field }) => (
                  <MUI.FormControl sx={{ width: '100%', borderRadius: '8px' }}>
                    <MUI.Select
                      id="relation_to_scholar"
                      native
                      {...field}                    >
                      <option value="" disabled>Select Relation</option>
                      <option value="Father">Father</option>
                      <option value="Mother">Mother</option>
                      <option value="Guardian">Guardian</option>
                    </MUI.Select>
                  </MUI.FormControl>
                )}
              />
              {errors.relation_to_scholar && (
                  <p id='errMsg'>
                      <MUI.InfoIcon className='infoErr' />
                      {errors.relation_to_scholar?.message}
                  </p>
              )}
            </MUI.Grid>

I can provide other part of my code for you to have nowledge about it more