React-Hook-Form Unregister not clearing values

I have a form with a mapped array of subcomponents within it. I have toggles on each of the mapped sub-components and I'm attempting to unregister the subcomponent fields if the toggle = false. Following the docs and the example in the associated video (https://react-hook-form.com/api/useform/unregister/) I'm pretty sure I have everything set up as I should, and I even added shouldUnregister: true in the useForm call. Yet I'm still getting values stored for each field.

My only guess is that the subcomponent needs to unmount through the useEffect hook or else the component rerenders and then registers the field, however I have not found any clear way to do that, so I've tried passing an empty return statement, but that did not work either.

If anyone as any ideas or guidance, it would be greatly appreciated

parent form component

const EditVisit = ({ visitId, event, goals }) => { 

/.../

const { register, unregister, handleSubmit, watch, control, setValue, formState: { errors } } = useForm({
    defaultValues: {
    visitStart: event?.visitStart,
    visitEnd: event?.visitEnd,
    location: event?.location,
    goals: [{
      title: '',
      marked: false,
      note: ''
    }]    
    },
    shouldUnregister: true
  });

/.../

{goals && goals.map((goal, index) => (
          <GoalInput 
            key={goal._id}
            goal={goal} 
            index={index} 
            register={register} 
            control={control}
            errors={errors}
            visitGoals={event?.goals}
            setValue={setValue}
            unregister={unregister}
          />
          
        
      ))}

/.../
}

Child mapped component with the unregister:

function GoalInput({ goal, index, register, unregister, setValue, control, errors, visitGoals }) {
    const [toggle, setToggle] = useState(false)

/.../

useEffect(() => {
        if(toggle === false) {
            unregister(`goals.${index}.title`)
            unregister(`goals.${index}.marked`)
            unregister(`goals.${index}.note`)
        }

        return(() => {})
    }, [unregister, toggle])

    return (
        <>
        <FormControlLabel
          {...register(`goals.${index}.title`, goal.title)}
          value={goal.title}
          name={`goals.${index}.title`}            
          control={
            <Switch
              key={index}
              {...register(`goals.${index}.marked`)}
              checked={goalData.marked || toggle}
              name={`goals.${index}.marked`}
              value={goalData.marked || toggle}
              onClick={console.log("marked? ", goalData.marked, "toggle ", toggle)}
              onChange={
                () => {
                    setToggle(!toggle);
                    setValue(`goals.${index}.title`, goal.title)
                }}

            />
          }
          label={goal.title}
        />
          <br />
          {toggle ? (
            <>
            <Controller
              control={control}
              name={`goals.${index}.note`}
              id={`goals.${index}.note`}
              render={({field}) => (
                <TextField
                    
                    index={index}
                    error={!!errors.note}
                    value={goalData.note || field.value}
                    onChange={(e)=>field.onChange(e)}
                    label="Progress Note"
                />
              )}
            />
            <br />
            </>
           
          ) : <></>}
        </>
    )
}

CSB: https://codesandbox.io/s/trusting-williamson-qslkxf?file=/src/GoalInput.js