npm install formik --save

npm install yup --save

npm install react-hook-form

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

// Validation schema using Yup
const validationSchema = Yup.object().shape({
  name: Yup.string()
    .required('Name is required'), // Validation rule: field is required
  email: Yup.string()
    .email('Email is invalid') // Validation rule: field has to be a valid email
    .required('Email is required'), // Validation rule: field is required
});

export function App() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={fields => {
        alert('Form submitted');
      }}
    >
      {({ errors, status, touched }) => (
        <Form>
          <div>
            <label htmlFor="name">Name</label>
            <Field name="name" type="text" className={'form-control' + (errors.name && touched.name ? ' is-invalid' : '')} />
            <ErrorMessage name="name" component="div" className="invalid-feedback" />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" type="text" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
            <ErrorMessage name="email" component="div" className="invalid-feedback" />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

import React from 'react';
import { useForm } from 'react-hook-form';

export function App() {
  const { register, handleSubmit, errors } = useForm();

  return (
    <form onSubmit={handleSubmit(data => alert('Form submitted'))}>
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" name="name" ref={register({ required: true })} />
        {errors.name && <p>Name is required</p>}
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />
        {errors.email && <p>Valid email is required</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}