Values Gets Removed Upon Validation [RHF - Zod - Multi-Select]

[BRB-OnyxTec]

I've been facing an issue. The Form validation and everything seems to work just fine, except at one critical point.
When I am trying to "Add" (submit the form) it removes data from the multi-select.

### Background:

1. Opn the form Page
2. Click Submit Button
3. Type in any one field, say "Name"
4. Then select any option from the multi select
5. Click Submit again
6. Select an option again
7. Click Submit again

What is happening?
The "Name" field stays there in the input box, but the "Multi-Select" option gets removed. But when we add again, it stays there.

What should be happening?
Just like the 'Name' input file was present, the Multi-Select Option shouldn't be removed upon validation

I have a Modal Form, which calls the Multi-Select component and other input components.
I am using the following:

• React-Hook-Form
• Zod
• React-Select Multi

Code for Zod Scheme and helper function:

export function createZodValidationMultipleRule(
  schema: ZodArray<ZodString, 'many'>,
  fieldName: string
) {
  return {
    validate: async (value: any) => {
      const result = schema.safeParse(value)
      if (result.success) {
        return true
      } else {
        return result.error.issues[0].message
      }
    },
    message: `${fieldName} is not valid`,
  }
}

export const schemaArrayOfStringsOptional = z.array(z.string())

Code for Multi-Select Component:

import {Control, Controller, RegisterOptions} from 'react-hook-form'
import Select from 'react-select'
import {CustomSelectInputProps} from '../../../entities/PropEntities'
import {customStyleMultiValueSelectInput} from './Styles'

const CustomSelectInput = <T,>({
  labelText,
  control,
  fieldName,
  rules,
  options,
  setValue,
  errorMessage,
  value,
  noOptionsText,
}: CustomSelectInputProps<T>) => {
  //function to handle the change of select
  const handleSelectChange = (newValue: any, actionMeta: any) => {
    const selectedValues = newValue.map((options: any) => options.value) // Assuming newValue is an array of selected option values
    setValue(fieldName, selectedValues, {shouldValidate: true}) // Update the form field value using setValue
  }
  if (value) {
    const alreadyPresentValues = value.map((options: any) => options.value)
    setValue(fieldName, alreadyPresentValues)
  }

  return (
    <div className='m-5'>
      <label className='form-label fs-6 text-dark fw-bolder'>{labelText}</label>

      <Controller
        name={fieldName}
        control={control}
        render={({field, fieldState}) => (
          <Select
            {...control.register(fieldName, rules)}
            // {...field}
            styles={customStyleMultiValueSelectInput}
            isMulti
            options={options}
            onChange={handleSelectChange}
            className='basic-multi-select text-gray-100'
            classNamePrefix='select'
            defaultValue={value}
            required
            noOptionsMessage={({inputValue}) => (!inputValue ? noOptionsText : 'No results found')}
            {...(fieldState.error && <p className='text-danger'>{fieldState.error?.message}</p>)}
          />
        )}
      />
      {/* {control && fieldName && errorMessage && <p>{errorMessage}</p>} */}
    </div>
  )
}

export default CustomSelectInput

Code for Form Page:

import {Modal, Spinner} from 'react-bootstrap'
import {useForm} from 'react-hook-form'
import * as z from 'zod'
import CustomInput, {createZodValidationMultipleRule, createZodValidationRule} from './CustomInput'
import {useCreateTeacher, useFetchAllTeachers} from '../../../hooks/useTeacher'



const CreateTeacher = ({show, handleClose}: ModalToggleUser) => {
  const {mutate, isError, isSuccess} = useCreateTeacher()
  const {data: dataClasses, error, isLoading} = useFetchAllClasses('null') //means data is there

  const {
    control, // RHF control
    handleSubmit,
    reset,
    setValue,
    formState: {errors},
  } = useForm()

  const onSubmit = (data: any) => {
    console.log('Data Create Teacher: ' + JSON.stringify(data))
    // mutate(data)
    // reset()
    handleClose()
  }
  let classOptions = dataClasses?.map((classData) => ({
    value: classData.id.toString(),
    label: classData.name,
  }))

  if (classOptions === undefined) {
    classOptions = [
      {
        value: '',
        label: 'No Data Found',
      },
    ]
  }
  return (
    <>
      <Modal
        className='modal fade'
        id='kt_modal_create_teacher'
        data-backdrop='static'
        tabIndex={-1}
        role='dialog'
        show={show}
        dialogClassName='modal-l'
        aria-hidden='true'
        onHide={handleClose}
      >
        
          <div className='modal-body '>
            <form>
              <CustomInput<string>
                labelText='Name'
                type='text'
                control={control}
                placeholder={'Enter Name'}
                name='name' // Field name
                rules={createZodValidationRule(schemaName, 'name')}
                errorMessage={errors['name'] ? errors['name']?.message?.toString() : ''}
              />

              
              <CustomSelectInput
                setValue={setValue}
                labelText='Select a Class'
                selectStatement={SELECT_A_CLASS}
                control={control}
                fieldName='classId'
                rules={createZodValidationMultipleRule(schemaArrayOfStringsOptional, 'classId')}
                errorMessage={errors['classId'] ? errors['classId']?.message?.toString() : ''}
                options={classOptions}
                noOptionsText={NO_UNASSIGNED_CLASS}
              />

            
              <div className='d-flex justify-content-center mt-5 pt-5'>
                <button
                  type='button'
                  className='btn btn-light-primary '
                  onClick={handleSubmit(onSubmit)}
                >
                  {ADD_TEACHER}
                </button>
              </div>
            </form>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default CreateTeacher