JSFiddle - React, Tailwind, and code Playground

JavaScript

import React from 'react';
import ButtonSubmit from './../Button/ButtonSubmit';
import { Link } from "react-router-dom";
import { Field, Formik, Form, ErrorMessage  } from 'formik';
import * as yup from 'yup';
import {useHttp} from './../hooks/useHttp'


function RegisterForm() {  
    const {loading, error, request} = useHttp();

    const validationSchema = yup.object().shape({
        email: yup.string().email('Введите корректный email').typeError('Должно быть числом').required('Пожалуйста, введите ваш Email'),
        name: yup.string().typeError("Введите корректное имя").required('Пожалуйста, введите ваше имя').max(10, "Длина имени, не должна превышать 10"),
        password: yup.string().required("Пожалуйста, придумайте и введите пароль").max(10, "Пароль не должен превышать 10 символов").min(6, "Пароль должен содержать 6 символов"),
        confirmPassword: yup.string().oneOf([yup.ref('password')], "Пароли не совпадают").required("Пароли не совпадают")
    }) 

    // const Register = async () => {
    //     try {
    //         const data = await request('/api/auth', 'POST', )
    //     }
    //     catch(e) {

    //     }
    // }

    return (
            <div className='formWrapper'>
                <div className='formContainer'>
                    <div className='formTitle'>
                        <h1>Регистрация</h1>
                        <p>Для входа в чат, вам нужно зарегистрироваться</p>
                    </div>
                    <Formik validateOnChange validationSchema={validationSchema}
                        initialValues={{
                            email: '',
                            name: '',
                            password: '',
                            confirmPassword: ''
                        }}
                         
                        >
                        {({values, errors, touched, handleChange, handleBlur, isValid, handleSubmit, dirty}) => (
                            <Form...