The right way to clear multi input array if user changes mind?

[dsound-zz]

My form uses radio buttons, 2 of which will reveal a creatable react-select input. The user can enter in domains on the fly. No drop down. I'm able to get this into the final submit object as an array but I'm trying to figure out how to clear the array if the user changes their mind and selects another radio button. This is a combination of controlled and uncontrolled inputs using register and control.

import React, { useState } from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import FormHeader from '../../../../formHelpers/FormHeader'
import { FormContent, FormRow } from '../../../../util/FormStyles'
import TextRow from '../../../../formHelpers/TextRow'
import Label from '../../../../formHelpers/Label'
import { colors } from '../../../../util/colors'
import Button from '../../../../formHelpers/Button'

const RegistrationEligibiltyContainer = styled.div`
  flex: 1;
  border-top: 50px solid ${colors.grey};
`

const RadioWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
`

const RadioGroup = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0.5em;
`

const Radio = styled.input`
  width: 20px;
  height: 20px;
`

const registrationTypes = [
  {
    label: 'Allow anyone with the link to register',
    value: 'radioOne',
  },
  {
    label: 'Allow anyone with this email domain to register:',
    value: 'radioTwo',
  },
  { label: 'Allow anyone with this code to register:', value: 'radioThree' },
  {
    label: 'Define eligible users manually through eligibilty file.',
    value: 'radioFour',
  },
]

const RegistrationEligibilty = () => {
  const { register, control, reset, watch, handleSubmit } = useForm<any>({
    // @ts-ignore
    defaultValue: {
      registrationType: {
        value: registrationTypes[0].value,
        label: registrationTypes[0].label,
      },
      domains: [],
      codes: [],
    },
  })

 const watchRegistrationType = watch('registrationType')

const onSubmit = (data: any) => {
    // eslint-disable-next-line no-console
    console.log(data)
  }

  return (
    <RegistrationEligibiltyContainer>
      <form onSubmit={handleSubmit(onSubmit)}>
         <FormRow>
            <RadioWrapper>
              {registrationTypes.map((rt) => (
                <RadioGroup key={rt.value}>
                  <Radio
                    id="registrationType"
                    // @ts-ignore
                    name="registrationType"
                    type="radio"
                    value={rt.value}
                    {...register('registrationType')}
                  />
                  <TextRow text={rt.label} style={{ paddingLeft: '10px' }} />
                  {watchRegistrationType === 'radioTwo' &&
                    rt.value === 'radioTwo' && (
                      <FormRow>
                        <div style={{ width: '90%' }}>
                          <MultiInput
                            id="domains"
                            name="domains"
                            control={control}
                            placeholder="Enter domains"
                          />
                        </div>
                      </FormRow>
                    )}
                    {watchRegistrationType === 'radioThree' &&
                        rt.value === 'radioThree' && (
                        <FormRow>
                        <Controller
                            name="domains"
                           // @ts-ignore
                          control={control}
                          render={({ field }) => (
                          <Creatable
                             {...field}
                             isMulti
                             options={field.value}
                            value={field.value}
                           placeholder="Enter domains..."
                           components={{
                           DropdownIndicator: () => null,
                           IndicatorSeparator: () => null,
                           Menu: () => null,
                         }}
                       />
                     )}
                   />
                </div>
              </FormRow>
               )}
          </RadioGroup>
         ))}
       </RadioWrapper>
     </FormRow>
   </FormContent>
  </form>
  </RegistrationEligibiltyContainer>
  )
}

export default RegistrationEligibilty