Сообщение об ошибке «Шап не функция» - что мне делать?

Question

Я получаю сообщение об ошибке, которое я не выяснил, как избавиться:

yup__WEBPACK_IMPORTED_MODULE_12 __. Object (...). Shap не является функцией

import React from 'react'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import TextField from '@material-ui/core/TextField'
import { Link } from 'gatsby'
import DisplayOutput from '../pages/DisplayOutput'
import { Formik, Field, Form, ErrorMessage } from 'formik'
import * as Yup from 'yup'

class DialogFormWithFormik extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
      dialogModal: 'none',
    }
  }

  handleClickOpen = () => {
    this.setState({ open: true })
    this.setState({ dialogModal: 'login' })
  }
  handleRegisterClickOpen = () => {
    this.setState({ open: true })
    this.setState({ dialogModal: 'register' })
  }

  handleClose = () => {
    this.setState({ dialogModal: false })
  }
  onSubmit = values => {
    console.log(values)
    alert('values submitted')
  }

  form = props => {
    return (
      <div>
        <Button
          variant="outlined"
          color="primary"
          onClick={() => this.handleClickOpen()}
        >
          Login
        </Button>
        &nbsp;
        <Button
          variant="outlined"
          color="primary"
          onClick={() => this.handleRegisterClickOpen()}
        >
          Register
        </Button>
        <Dialog
          onClose={() => this.handleClose()}
          aria-labelledby="customized-dialog-title"
          open={this.state.dialogModal === 'login'}
        >
          <DialogTitle id="form-dialog-title">
            To Display Student Data
          </DialogTitle>
          <DialogContent />

          <form onSubmit={props.handleSubmit}>
            <TextField
              label="Username"
              type="text"
              margin="normal"
              name="userName"
            />
            <ErrorMessage name="userName" />
            <br />
            <TextField
              label="Password"
              type="password"
              autoComplete="current-password"
              margin="normal"
            />
            <ErrorMessage name="password" />
            <DialogActions>
              <nav>
                <Button color="primary">Login</Button>
              </nav>

              <br />
              <Button onClick={() => this.handleClose()}>Cancel</Button>
            </DialogActions>
          </form>
        </Dialog>
      </div>
    )
  }
  schema = () => {
    const schema = Yup.object().shap({
      userName: Yup.string().required(),
      password: Yup.string().required(),
    })
    return schema
  }

  render() {
    return (
      <div align="center">
        <Formik
          initialValues={{
            userName: '',
            password: '',
          }}
          onSubmit={this.onSubmit}
          render={this.form}
          validationSchema={this.schema()}
        />
      </div>
    )
  }
}

export default DialogFormWithFormik