initialValues type check error ts(2322)

[haw0k]

I have two variants of the form. The second variant (I named it "pro") have the additional field "company".
I'm trying to use one component with component instead of two components and got types error at assigning a value to the Formik initialValue prop.

<Formik
  initialValues={isPro ? initValues : initProValues}
  onSubmit={isPro ? signup : signupPro}
>

The error message is:

  Property 'company' is missing in type 'ISignup' but required in type 'ISignupPro'.ts(2322)
App.tsx(9, 3): 'company' is declared here.
types.d.ts(147, 5): The expected type comes from property 'initialValues' which is declared here on type 'IntrinsicAttributes & FormikConfig<ISignupPro> & { children: () => Element; initialValues: ISignup; onSubmit: (values: ISignupPro) => void; }'

Here the link to sandbox with my project.
Full code of App.tsx below:

import { useState } from "react";
import { Formik, Form, Field } from "formik";

interface ISignup {
  email: string;
  password: string;
}
interface ISignupPro extends ISignup {
  company: string;
}

const signup = (values: ISignup) => {
  alert(JSON.stringify(values, null, 2));
};

const signupPro = (values: ISignupPro) => {
  alert(JSON.stringify(values, null, 2));
};

export default function App() {
  const [isPro, setPro] = useState(false);
  const initValues: ISignup = {
    email: "",
    password: ""
  };

  const initProValues: ISignupPro = {
    email: "",
    password: "",
    company: ""
  };

  return (
    <div className="App">
      <h1>signup form example</h1>
      <div>
        <label htmlFor="pro">Pro</label>
        <input
          type="checkbox"
          id="pro"
          checked={isPro}
          onChange={() => setPro((prev) => !prev)}
        />
      </div>

      <Formik
        initialValues={isPro ? initValues : initProValues}
        onSubmit={isPro ? signup : signupPro}
      >
        {() => {
          return (
            <Form>
              <div>
                <label htmlFor="email">Email</label>{" "}
                <Field id="email" name="email" type="email" />
              </div>

              <div>
                <label htmlFor="password">Password</label>{" "}
                <Field id="password" name="password" type="password" />
              </div>

              {isPro && (
                <div>
                  <label htmlFor="company">Company</label>{" "}
                  <Field id="company" name="company" type="text" />
                </div>
              )}
              <button type="submit">submit</button>
            </Form>
          );
        }}
      </Formik>
    </div>
  );
}

I'm stuck. Please help!