Conditionally Rendered Fields Conflicting with onChange Validation

const schema = z.object({
  provider: z.object({
    apiKey: z.string(),
    endpoint: z.string(),
  }).nullable(),
});

const form = useForm({
  defaultValues: { provider: null }, // note: parent initialized as null
  validators: { onChange: schema },
});

const provider = useStore(form.store, (state) => state.values.provider);

const handleToggle = (enabled: boolean) => {
  form.setFieldValue('provider', enabled ? { apiKey: '', endpoint: '' } : null);
};

return (
  <>
    <Checkbox checked={provider != null} onChange={handleToggle} />

    {provider != null && (
      <>
        <form.Field name="provider.apiKey" children={...} />
        <form.Field name="provider.endpoint" children={...} />
      </>
    )}
  </>
);

form.setFieldMeta('providerConfig', (prev) => {
  return {
    ...prev,
    errorSourceMap: prev.errorSourceMap || {}, // this is undefined for some reason causing validation errors
  };
});