React-hook-form working with multiple array data and conditional fields within a map array

I'm lost in the weeds on this, but I think the issues are straightforward enough, and its just my lack of understanding as to why I cant get this working right. I have a form using react-hook-form that is part of a scheduling/ documentation feature. The initial data is pulled from 1 api endpoint which sets the initial info in the parent level of the form- the standard date/time info and the subsequent conditional goal info if the event has already been interacted with- as an 'event' prop. For the child component within the form (GoalInput), the goal titles are pulled from a separate api endpoint to ensure the available goal fields match the current report. Since the first time a user will interact with any given event, the goal fields should be un-toggled and have no associated user information, however, if they are returning to an event previously interacted with, I want the previously set information (contained in the event initial data mentioned earlier) displayed as the default.

Heres the parent form

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

 const onSubmit= async (data) => {
/.../
}

 return (
    <div>
      <Button color='primary' variant='contained' onClick={handleClickOpen}>
        Edit Visit
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Edit Visit</DialogTitle>
        <DialogContent>

        <DialogContentText>
            Visit for {event.client.fullName}
        </DialogContentText>
    
        
          <form id="editVisit" 
              onSubmit={(e) =>
              handleSubmit(onSubmit, onError)(e).catch((e) => {
                console.log("e", e);
              })}>
        
     <br></br>
     <section>
     /... initial fields .../
     </section>
     {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}
          />
          
        
      ))}
/... end of form/ action buttons .../

And the child component:

function GoalInput({ goal, index, register, unregister, setValue, control, errors, visitGoals }) {
    const [toggle, setToggle] = useState(false)
    
    
    console.log("goal: ", goal)
    console.log("visitGoals: ", visitGoals)
    const goalData = visitGoals?.filter((value)=> {
        if ( value.marked === true) {
            return value
            
         }
    })
    console.log("goalData: ", goalData)

    useEffect(() => {
        if(!toggle) {
            unregister(`goals.${index}.title`)
            unregister(`goals.${index}.marked`)
            unregister(`goals.${index}.note`)
        }
    }, [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}
            //   checked={toggle}
              name={`goals.${index}.marked`}
              value={goalData.marked || toggle}
              onClick={console.log("marked? ", goalData.marked, "toggle ", toggle)}
            //   value={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}
                    // value={field.value}
                    onChange={(e)=>field.onChange(e)}
                    label="Progress Note"
                />
              )}
            />
            <br />
            </>
           
          ) : <></>}
        </>
    )
}

The visitGoals prop is passing down the event information if it already contains existing goals. Currently the log is showing that the component is correctly filtering out if the goals had been marked: true previously, however, the actual Switch component is not registering the goalData value. I tried setting it as state and having a useEffect set the state, but I was getting just an empty array. I'm sure theres something simple I'm missing to get the input fields to recognize the values, but I cant figure it.

As an extra question if I may, I'd also like to unregister any fields if the Switch input is not toggled, so that its false, so that I'm not storing a bunch of empty objects. Following the docs and video, I thought I've set it up correctly, even trying shouldUnregister: true in the parent form, but I can't seem to navigate that either. The submission data shows the fields are being registered fine by RHF, so I figured the unregister by the same syntax should have worked.

React Hook Form's unregister docs: https://react-hook-form.com/api/useform/unregister

Any direction or guidance would be greatly appreciated.