TypeError: Cannot destructure property 'confirmPasswordFields' of 'templateConfirmPassword' as it is undefined.

The error is saying that I can't unstructure 'confirmPasswordFields' from undefined, but I can't understand, where is the error? I don't know what else I need to do to resolve this.

I'm a beginner, sorry for the question

Form

interface IFieldTemplateConfirmPassword {
  titleConfirmPassword: string;
  label: string;
  name: string;
  placeholder: string;
  id?: number;
}
interface ITemplateConfirmPassword {
  titleConfirmPassword: string;
  confirmPasswordFields: IFieldTemplateConfirmPassword[];
}

// Form component
function Form({
  templateConfirmPassword,
  onSubmit }: {
    templateConfirmPassword: ITemplateConfirmPassword;
    onSubmit: (values: any) => void
  }) {

  const { confirmPasswordFields } = templateConfirmPassword

const renderFieldsRegister = (confirmPasswordFields: IFieldTemplateConfirmPassword[]) => {
    return confirmPasswordFields?.map((confirmPasswordField) => {
      const { name, placeholder, label, id } = confirmPasswordField
      const props = {
        secret: 'password' as const
      }
      
      switch (props.secret) {
        case 'password':
          return (
            <div key={id} className={styles.formControl}>
              <label htmlFor={name} className="sr-only">{label}</label>
              <input
                {...register("passwordConfirmation")}
                type="password"
                name={name}
                id={name}
                placeholder={placeholder}
              // required
              />
              {errors?.passwordConfirmation?.message && (
                <small className="errorText">{errors?.passwordConfirmation?.message}</small>
              )}
            </div>
          )
      }
    })
  }

return (
    <>
        <form onSubmit={handleSubmit(onSubmit)}>
          {renderFieldsRegister(confirmPasswordFields)}
        </form>
    </>
  )
}

FormRegister

import Form from '../../../../src/components/Reusable/Form/Index'

function RegisterForm(props: any) {
  const templateConfirmPassword = {
    titleConfirmPassword: 'Confirm password',
    confirmPasswordFields: [
      {
        titleConfirmPassword: 'Password Confirmation',
        type: 'password',
        label: 'Password Confirmation',
        name: 'passwordConfirmation',
        placeholder: 'Confirma password'
      }
    ]
  }

  return (
    <div>
      <Form
        templateConfirmPassword={templateConfirmPassword}
        onSubmit={onSubmit}
      />
    </div>
  )
}
function onSubmit(values: any) {
  console.log(values)
}
export default RegisterForm