Formik에서 유효성 검사를 생성 할 때 오류가 발생하는 이유는 무엇입니까?

"Formik"라이브러리를 사용하여 양식을 구현합니다.

이 코드가 있습니다.

import { useFormik } from 'formik';
import * as yup from 'yup';
import FInput from './FInput/FInput';

const Form = () => {
    const {handleSubmit, values, handleChange} = useFormik({
      initialValues: {
          username: '',
          email: '',
          password: '',
          confirm_password: '',
      },
        validationSchema: yup.object().shape( schema: {
          username: yup.string()                            // the error here
           .required('This field is required'),
          email: yup.string()
           .required('This field is required')
           .email('This field is required'),
          password: yup.string()
           .required('This field is required')
           .min(6, 'This password is too short')
           .max(30, 'This passwors is too long'),
        confirm_password: yup.string()
        .oneOf([yup.ref(key:'password'), null])
        .required('This field is required'),                                    
      }),
      onSubmit: (formValues) => {
          console.log('submit', formValues);
      },    
    });
    
   return (
   <form className="fform" onSubmit={handleSubmit}>
       <FInput
         label="username"
         id="username" 
         inputProps={{
           name:'username',
           value: values.username,
           onChange: handleChange,
       }}
       />
      <FInput
         label="email"
         id="email" 
         inputProps={{
           name:'email',
           value: values.email,
           onChange: handleChange,
           type: 'email',
       }}
       />
       <FInput
         label="password"
         id="password" 
         inputProps={{
           name:'password',
           value: values.password,
           onChange: handleChange,
           type:'password',
       }}
       />
       <FInput
         label="Confirm password"
         id="confirm_password" 
         inputProps={{
           name:'confirm_password',
           value: values.confirm_password,
           onChange: handleChange,
           type:'password',
       }}
       />
       <button type="submit">Submit Form</button>
   </form>
   );
};

export default Form;

오류가 있습니다.

18:25 행 : 구문 분석 오류 : 예기치 않은 예약 유형 문자열

18 | 사용자 이름 : yup.string ()

그건 그렇고, username텍스트 편집기에서 색상으로 강조 표시되지 않습니다. 오류를 수정하는 방법? 코드를 여러 번 보았는데 오류의 원인을 이해할 수 없습니다.이 문제를 해결하도록 도와주세요.