React-select active form control via another react-select

I have two required mapped react-select in a form. One react-select in setting the value of the second react-select, both have form-control and error boxes.

Issue: On-change of first react-select is setting the value of second react-select but it's not changing the state of that react select. therefore, the second react-select is still considered empty by form control and throws the error "This field is required" when I click on Submit button

Code:

Function

   const designationEvent = (designationId) => {
     if (designationId !== "") {  
         axios.post(`${process.env.REACT_APP_BASEURL}/employee/getGradeofDesignation`, {designationId}).then((res) => {
         console.log(`this is the grade response ${res.data.grade}`)
         setGrade(res.data.grade)
         console.log(grade)
         })
  }}

React-select

    <Col md='6' className='mb-1'>
        <Label className='form-label' for='designation' >
          Designation <span style={{color: 'red'}}>*</span>
        </Label>
         <Controller
            control={control}
            defaultValue={designationList[0]}
            name="designation"
            render={({ field: { onChange, value, ref }}) => (
                <Select
                    inputRef={ref}
                    className={classnames('react-select', { 'is-invalid': errors.designation && true })}
                    classNamePrefix="select"
                    options={designationList}
                    // DesignationViseGrade
                    value={designationList.find(c => c.value === value)}
                    onChange={val => { onChange(val.value); designationEvent(val.value)  }}
                />
            )}
        />
      {errors.designation && <FormFeedback>{"Designation is required  field"}</FormFeedback>}
      </Col>
  
        <Col md='6' className='mb-1'>
        <Label className='form-label' for='grade' >
          Grade <span style={{color: 'red'}}>*</span>
        </Label>
        <Controller
            control={control}
            defaultValue={gradeList[0]}
            name="grade"
            render={({ field: { onChange, value, ref }}) => (
                <Select
                    inputRef={ref}
                    className={classnames('react-select', { 'is-invalid': errors.grade && true })}
                    classNamePrefix="select"
                    options={gradeList}
                    onFocus={  gradeList.find(c => c.value === grade)}
                    value={value ?  gradeList.find(c => c.value === value) :  gradeList.find(c => c.value === grade)}
                    onChange={val => onChange(val.value)}
                  />
            )}
        />
       {errors.grade && <FormFeedback>{"Grade is required field"}</FormFeedback>}
      </Col>

Expectation/Result: The Grade react-select should be selected with state change and from-control should not throw an error on "submit". I have to click once to change the state.

What I've tried: I've tried the setValue function instead of value and I've tried to apply onFocus() on the on-change of the second react-select (grade) but nothing works so far.