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

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);}}/>


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

Edit proud-wildflower-3gndt

Source: ReactJs