react-hook-form react-select & yup. Issues with conditional select options & setting defaults

[dmoptimal]

Hi, not sure if this is the right place to post this. Please let me know if not!

I can't figure out if I'm having trouble with react-select or react-hook-form. Basically I have a react-select component called 'machineType' which can be set to 'single' or 'multiple'. When set to 'single' I need to use a flat list to populate a second dropdown called 'machine'. When set to 'multi' I need to use a grouped list to populate the second dropdown.

Under the hood this all works using setValue (I have used a watch() to confirm that it has changed, you can see in my example) But the UI doesn't change for the grouped react-select component.

Also the default value doesn't load for the grouped dropdown for some reason (I am using yup & yupResolver, passed to useForm) Again this does work under the hood but doesn't show up in the UI.

I have a feeling I'm not using the Controller component correctly.

Here's an example: https://codesandbox.io/s/weathered-cache-g3b3ny?file=%2Fsrc%2FApp.js