Error message "shap is not a function" - what shall I do? - reactjs

Question

I get an error message I didn't figure out how to get rid off:
yup__WEBPACK_IMPORTED_MODULE_12__.object(...).shap is not a function
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>
<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