How to use the yup.object function in yup

useOnMount(() => {
        const invite = qs.parse(search).invite || ''

        // Set and validate `invite` on mount.
        setFormField('invite', invite)

        yup.object().shape({
            invite: yup.reach(schemas[0], 'invite'),
        }).validate({
            invite,
        }).then(
            () => {
                if (mountedRef.current) {
                    // To make sure that the registerPage invite doesn't stick in the browser history
                    replace(pathname)
                }
            },
            ({ message }: yup.ValidationError) => {
                if (mountedRef.current) {
                    setFieldError('name', message)
                }
            },
        )

LoginForm,
} from './Certificate.style';

const name = Yup.string()
  .min(3)
  .required();

const email = Yup.string()
  .email()
  .required();

const nameSchema = Yup.object({
  name,
});

const nameEmailSchema = Yup.object({
  name,
  email,
});

export default class NameForm extends Component {
  state = {
    name: '',
    email: '',
    errors: {
      name: '',
      email: '',
    },
  };

  validate = async () => {
    const { location } = this.props;

.max(100, sharedMessages.validateTooLong)
        .required(sharedMessages.validateRequired),
      address: Yup.string()
        .matches(addressRegexp, sharedMessages.validateAddress)
        .required(sharedMessages.validateRequired),
      port: Yup.number()
        .integer(sharedMessages.validateInt32)
        .positive(sharedMessages.validateInt32)
        .required(sharedMessages.validateRequired),
      secure: Yup.boolean(),
    }),
    otherwise: Yup.object().strip(),
  }),
  mqtt: Yup.object().when('_provider', {
    is: 'mqtt',
    then: Yup.object().shape({
      server_url: Yup.string()
        .matches(mqttUrlRegexp, sharedMessages.validateUrl)
        .required(sharedMessages.validateRequired),
      client_id: Yup.string()
        .matches(idRegexp, sharedMessages.validateAlphanum)
        .min(2, sharedMessages.validateTooShort)
        .max(23, sharedMessages.validateTooLong)
        .required(sharedMessages.validateRequired),
      username: Yup.string()
        .matches(idRegexp, sharedMessages.validateAlphanum)
        .min(2, sharedMessages.validateTooShort)
        .max(100, sharedMessages.validateTooLong)
        .required(sharedMessages.validateRequired),
      password: Yup.string()
        .min(2, sharedMessages.validateTooShort)
        .max(100, sharedMessages.validateTooLong)

validationSchema: (props: Props) =>
      object().shape({
        [FORM_FIELD.linkValue]: string()
          .trim()
          .max(
            100,
            props.t("profile-page.social-links.validation.link-max-length")
          )
      }),
    handleSubmit: (values, { props, setSubmitting, setFieldValue }) => {

const roles: Role[] = [
    {
      label: t('PERMISSIONS.ADMIN'),
      value: 'admin',
    },
    {
      label: t('PERMISSIONS.MEMBER'),
      value: 'member',
    },
  ];

  const [isLoading, setLoading] = useState(false);
  const [permissionsIsOpen, setPermissionsIsOpen] = useState(false);

  const ValidationScheme = Yup.object({
    role: Yup.string().oneOf(['admin', 'member']).required(),
  });

  type InitialValue = Yup.InferType;

  const initialValues: InitialValue = {
    role: userToEdit?.role,
  };

  return (
     {
        setLoading(true);

import types from 'react-formal-inputs'
import * as yup from 'yup'
import Form from 'react-formal'

import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

import '../css/one-light.scss'

const MyDateInput = props => 

const nameSchema = yup
  .string()
  .default('')
  .required('You must provide a name')

const modelSchema = yup.object({
  name: yup.object({ first: nameSchema, last: nameSchema }),
  dateOfBirth: yup
    .date()
    .required('Please enter a date of birth')
    .max(new Date(), "You can't be born in the future!"),
  colorId: yup.number(),
  age: yup
    .number()
    .nullable()
    .required('Please enter an age')
    .positive('Ages must be a positive number'),
})

const reqMap = {
  react: React,
  'react-dom': ReactDOM,

touched={touched.passwordConfirm}
          value={values.passwordConfirm}
          onChange={handleChange}
          type="password"
        />
        <button disabled="{isSubmitting}" type="submit">
            Sign up for Musicritic
        </button>
    
);

export default withFormik({
    mapPropsToValues: () =&gt; ({
        username: '', email: '', password: '', passwordConfirm: '',
    }),
    validationSchema: Yup.object().shape({
        username: usernameValidator(),
        email: emailValidator(),
        password: passwordValidator(),
        passwordConfirm: passwordConfirmationValidator(Yup.ref('password')),
    }),
    handleSubmit: (values, { setSubmitting }) =&gt; {
        createUser(values).then(() =&gt; {
            setSubmitting(false);
            toast.success('User successfully created!');
        }).catch((error) =&gt; {
            setSubmitting(false);
            toast.error(error.message);
        });
    },
})(SignupForm);

});
  };
}

const UPDATE_CART_MUTATION = gql(require("./updateCart.gql"));

const INITIAL_VALUES = {
  phone: "380"
};

export default compose(
  connect(),
  graphql(CART_QUERY),
  graphql(UPDATE_CART_MUTATION),
  withFormik({
    validationSchema: Yup.object().shape({
      phone: Yup.string().matches(/\d{12}/).required(),
      email: Yup.string().email()
    }),
    mapPropsToValues: (props: Props) => {
      const values = { ...props.data!.cart };
      for (const key in values) {
        if (!values[key] && INITIAL_VALUES.hasOwnProperty(key)) {
          values[key] = INITIAL_VALUES[key];
        }
      }
      return values;
    },
    handleSubmit: (values, { props, setSubmitting, setErrors }) => {
      const { dispatch, mutate, data } = props;
      const { id } = data!.cart!;
      Modal.alert(

render() {
        const { createServer } = this.props

        return (
            
                <form>
                    <title>Create new server</title>
                     {
                            createServer({</form>