Using Controller component of react-hook-form doesn't allow custom Antd Select to show label

Boussadjra Brahim :

I'm using Antd Select component to build a custom component which gives me the ability to return an object instead of a primitive value and show nested value in object item in the select dropdown options, it works fine and it can be validated using react-hook-form :

<Form.Item ... >
  <SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
            name="department2"  onChange={e => {setValue("department2", e);}}/>

</Form.Item>

This also works with Controller component however it doesn't show the label inside the select input :

<Controller as={<SpringSelect style={{ width: "200px" }} />}
            placeholder="Department 1" name="department1" options={departments}
            onChange={([e]) => {return { value: e };}} control={control}      />

for more details check the whole code in the codesandbox playground

Springer F :

Removing value from initial innerProps , will not fix the issue for the case of resetting or setting form initial values (using reset).

you have to define value and defaultValue props for you custom Select (SpringSelect)

for the controlled select it'll work correctly , for reset , but the uncontrolled you have to use watch hook-form function to display initial values

see the below condeSande box :