How to set react hook form default values when using Controller with custom components - reactjs

Question

What I'm trying to do:
Provide default values to my custom controlled rhf components and have them update like an rhf uncontrolled component.
Better understand how Controller sets default values so I can troubleshoot.
My problem:
I can only set default values with a rhf uncontrolled component as shown in the docs. For example, by creating a defaultValues object with each input's default value then calling reset({...defaultValues}) in a useEffect on page load.
I don't understand how rhf passes/sets default values with Controller
Examples:
Codesandbox here
// Parent form component (RegistrationForm.tsx)
// set up form default values
const defaultValues = {
standardRadio: "mint",
registerRadio: "supercross"
};
// fill in default values on load
useEffect(() => {
reset({ ...defaultValues });
}, []);
// DOESN'T WORK: Can't set the default value of WrapperRadioGroup
<WrapperRadioGroup
name="standardRadio"
groupLabel="This is a radio group label"
control={control}
style="standard"
defaultValue=" "
options={[
{ value: "orange", label: "Orange ice cream" },
{ value: "mint", label: "Mint ice cream" },
{ value: "chocolate", label: "Chocolate ice cream" },
{ value: "vanilla", label: "Vanilla ice cream" }
]}
/>
// Default value set properly using the following uncontrolled component
<input
{...register("registerRadio")}
id="registerRadio1"
type="radio"
value="motogp"
/>
<label htmlFor="registerRadio1">Moto GP</label>
...
<input
{...register("registerRadio")}
id="registerRadio4"
type="radio"
value="islemantt"
/>
<label htmlFor="registerRadio4">Isle of Man TT</label>

Answer 1

Figured it out. When using Controller there's no need to pass a defaultValue prop on the parent component as doing so will override the value used by RHF's Controller. RHF takes the value you set up in your defaultValues object and then make that the current value for the input.
Example:
Set the default values for all of your inputs via an object. (Key: input's name value: input default value).
const defaultValues = {
standardRadio: "mint",
registerRadio: "supercross"
}
Use reset() to update the form inputs. See documentation.
useEffect(() => {
reset({ ...defaultValues });
}, []);
Don't pass a defaultValue prop to the controlled component. If you do it will override RHF Controller's value.
<WrapperRadioGroup
name="standardRadio"
groupLabel="This is a radio group label"
control={control}
style="standard"
=> defaultValue=" " // !! DON'T PASS A DEFAULTVALUE PROP. OVERRIDES RHF's CONTROLLER
options={[
{ value: "orange", label: "Orange ice cream" },
{ value: "mint", label: "Mint ice cream" },
{ value: "chocolate", label: "Chocolate ice cream" },
{ value: "vanilla", label: "Vanilla ice cream" }
]}
/>
If you need the default value in the input's controlled component then access it via props.value