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

Question

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

Answer 1

I think the problem is due to your SprintSelect innerProps

have a look my CSB below:

https://codesandbox.io/s/suspicious-platform-tlr55

<Select onChange={props.onChange}>