Свойство 'validate' не существует TypeScript, React. js

Question

Я использую форму реакции-финала. У меня есть трехэтапная форма, и я хотел добавить к ней некоторую проверку. Я написал WizardPage так:

<WizardPage
    validate={(values: Values) => {
      const errors = {
        error1: "",
        error2: "",
      };
      if (!values.email) {
        errors.error1 = "Required";
      }
      if (!values.surname) {
        errors.error2 = "Required";
      }
      return errors;
    }}
  >
    <Field<string>
      type="text"
      name="name"
      component={TextInput}
      placeholder="Imię"
    />
    <Field<string>
      type="text"
      name="surname"
      component={TextInput}
      placeholder="Nazwisko"
    />
  </WizardPage>

, а мой основной файл реестра выглядит так:

import React, { useState } from "react";
import { Form } from "react-final-form";
import styles from "./register.module.scss";
import { Values } from "./register";

type Wizard = {
  onSubmit: (values: Values) => void;
};

type WizardPage = {
  validate: (values: Values) => { error1: String; error2: String };
};

export const WizardPage: React.FC<WizardPage> = ({ validate, children }) => (
  <div className={styles.wizard}>{children}</div>
);

// 3-steps form
const Wizard: React.FC<Wizard> = ({ onSubmit, children }) => {
  const [page, setPage] = useState(0);
  const [values, setValues] = useState<Values | undefined>(undefined);
  const activePage = React.Children.toArray(children)[page];
  const isLastPage = page === React.Children.count(children) - 1;

  [...]

  const validate = (values: Values) => {
    return activePage.validate(values);
  };

  return (
    <Form onSubmit={handleSubmit}>
      {({ handleSubmit, submitting, values }) => {
        return (
          <form className={styles.moblieForm} onSubmit={handleSubmit}>
            {activePage}
             [...]
          </form>
        );
      }}
    </Form>
  );
};

export default Wizard;

Я не знаю, почему в строке const validate = (values: Values) => { return activePage.validate(values); };, у меня есть ошибка: Property 'validate' does not exist on type 'string | number..., потому что я добавил тип вверху файла в компонент WizardPage ....

Полный код этих компонентов - https://codesandbox.io/s/vigorous-fast-icnhm?file= / src / Register.tsx