import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
                  
const TooltipFormValidation = () => {
const [submitErrors, setSubmitError] = useState(false);

const submitHandler = (values: TooltipValidationProp, { resetForm }: { resetForm: () => void }) => {
  resetForm();
  setSubmitError(false);
};

const TOOLTIP_INITIALVALUE: TooltipValidationProp = { firstname: "", lastname: "", username: "", city: "", state: "", zip: "" };

const TOOLTIP_VALIDATIONSCHEMA = Yup.object().shape({
  firstname: Yup.string().min(2).required(),
  lastname: Yup.string().min(2).required(),
  username: Yup.string().min(2).required(),
  city: Yup.string().min(2).required(),
  state: Yup.string().min(2).required(),
  zip: Yup.string().min(2).required(),
});

return (
  <Card>
   <CardBody>
     <Formik initialValues={TOOLTIP_INITIALVALUE} onSubmit={submitHandler} validationSchema={TOOLTIP_VALIDATIONSCHEMA}>
       {({ errors }) => 
       <Form>
         <Row className="g-3 custom-input">
           <Col md="4" className="position-relative">
             <Label>{FirstName}</Label>
             <Field name="firstname" type="text" className={`form-control ${submitErrors && `${errors.firstname ? "is-invalid" : "is-valid"}`}`} placeholder={MarkFirstNamePlaceholder} />
             <div> className="valid-tooltip">{LooksGood}</div>
           </Col>
           <Col md="4" className="position-relative">
             <Label>{LastName}</Label>
             <Field name="lastname" type="text" className={`form-control ${submitErrors && `${errors.lastname ? "is-invalid" : "is-valid"}`}`} placeholder={OttolastNamePlaceholder} />
             <div> className="valid-tooltip">{LooksGood}</div>
           </Col>
           <Col md="4" className="position-relative">
             <Label>{Username}</Label>
             <InputGroup className="has-validation">
               <InputGroupText>@</InputGroupText>
               <Field type="text" name="username" className={`form-control ${submitErrors && `${errors.username ? "is-invalid" : "is-valid"}`}`} />
               <div>  className="invalid-tooltip">{UsernameFeedback}</div>
             </InputGroup>
           </Col>
           <Col md="6" className="position-relative">
             <Label>{City}</Label>
             <Field name="city" type="text" className={`form-control ${submitErrors && `${errors.city ? "is-invalid" : "is-valid"}`}`} />
             <div>  className="invalid-tooltip">{CityFeedback}</div>
           </Col>
           <Col md="3" className="position-relative">
             <Label> htmlFor="validationTooltip04">{State}</Label>
             <Field name="state" as="select" className={`form-control ${submitErrors && `${errors.state ? "is-invalid" : "is-valid"}`}`}>
               <option>{StateChoose}</option>
               {TOOLTIP_VALIDATION_LIST.map((item,index)=>(<option> value={item} key={index}>{item}</option>))}
             <<Field>
             <div className="invalid-tooltip">{StateFeedback}</div>
           </Col>
           <Col md="3" className="position-relative">
             <Label>{Zip}</Label>
             <Field name="zip" type="text" className={`form-control ${submitErrors && `${errors.zip ? "is-invalid" : "is-valid"}`}`} />
             <div className="invalid-tooltip">{ZipFeedback}</div>
           </Col>
           <Col sm="12">
             <Btn color="primary" type="submit" onClick={() => setSubmitError(true)}>{SubmitButton}</Btn>
           </Col>
         </Row>
       </Form>
       }
     </Formik>
    </CardBody>
  </Card>
  );
};

Remove package from project

npm uninstall formik

npm uninstall yup

import { Card, CardBody, Row, FormGroup, Col, Form, Input, Label } from "reactstrap";

<Form className="theme-form">
 <Card>
  <CardBody class="p-0">
   <Row>
    <Col>
     <FormGroup>
       <Label>Email address</label>
       <Input type="email" placeholder="name@example.com">
     </FormGroup>
    </Col>
   </Row>
  </CardBody>
 </Card>
</Form>

<div class="row">
 <div class="custom-radio-ml col-lg-3 col-md-6">
  <div class="form-check radio radio-primary">
   <input class="form-check-input" id="radio1" type="radio" name="radio1" value="option1" data-bs-original-title="" title="">
   <label class="form-check-label" for="radio1">Option<span class="digits"> 1</span></label>
  </div>
  <div class="form-check radio radio-primary">
   <input class="form-check-input" id="radio3" type="radio" name="radio1" value="option1" disabled="" data-bs-original-title="" title="">
   <label class="form-check-label" for="radio3">Disabled</label>
  </div>
  <div class="form-check radio radio-primary">
   <input class="form-check-input" id="radio4" type="radio" name="radio1" value="option1" checked="" data-bs-original-title="" title="">
   <label class="form-check-label" for="radio4">Checked</label>
  </div>
</div>
<div class="col-md-6 col-lg-3">
 <div class="form-check checkbox mb-0">
  <input class="form-check-input" id="checkbox1" type="checkbox" data-bs-original-title="" title="">
  <label class="form-check-label my-0" for="checkbox1">Default</label>
 </div>
 <div class="form-check checkbox mb-0">
  <input class="form-check-input" id="checkbox2" type="checkbox" disabled="" data-bs-original-title="" title="">
  <label class="form-check-label my-0" for="checkbox2">Disabled</label>
 </div>
 <div class="form-check checkbox mb-0">
  <input class="form-check-input" id="checkbox3" type="checkbox" checked="" data-bs-original-title="" title="">
  <label class="form-check-label my-0" for="checkbox3">Checked</label>
 </div>
</div>
</div>

<Form>
<FormGroup className="m-form__group">
  <div class="form-label">Left Addon</div>
  <InputGroup>
    <span class="input-group-text">@</span>
    <Input type="text" placeholder="Email">
  </InputGroup>
  </FormGroup>
</Form>

import ReactDatePicker from "react-datepicker";

const DatePickerComponentFirst = () => {
  const [startDate, setStartDate] = useState(new Date());
  const handleChange = (date: Date) => setStartDate(date);

  return (
    <Row>
      <Col xxl="9" className="box-col-12">
        <InputGroup className="flatpicker-calender">
          <ReactDatePicker className="form-control flatpickr-input" selected={startDate} onChange={handleChange} />
        </InputGroup>
      </Col>
    </Row>
  );
};

<Label className="switch">
 <Input type="checkbox" checked>
 <span className="switch-state"></span>
</Label>
<Label className="switch">
 <Input type="checkbox">
 <span className="switch-state"></span>
</Label>

const DefaultTouchspin = () => {
const initialValues = DEFAULT_TOUCHSPIN_DATA.map((data) => data.value);
const [values, setValues] = useState(initialValues);
const handleIncrement = (index:number) => {
  setValues((prevValues) => {
    return prevValues.map((value, i) => (i === index ? value + 1 : value));
  });
};
                
const handleDecrement = (index:number) => {
  setValues((prevValues) => {
    return prevValues.map((value, i) => (i === index && value > 0 ? value - 1 : value));
  });
};
                
return (
    <Card>
      <CardBody className="common-flex">
        <div className="touchspin-wrapper d-flex">
          <Btn color="primary" outline className={`p-0 decrement-touchspin btn-touchspin me-1 ${btnClass}`} onClick={onDecrement}>
            <i className="fa fa-angle-left" />
          </Btn>
          <Input className={`input-touchspin spin-outline-${color} me-1`} type="number" value={value} readOnly />
          <Btn color={color} outline={outline} className={`p-0 increment-touchspin btn-touchspin ${btnClass}`} onClick={onIncrement}>
            <i className="fa fa-angle-left" />
          </Btn>
        </div>
      </CardBody>
    </Card>
);
};

const NumberingWizard = () => {
const { numberLevel,basicInputFormValue, showFinish } = useAppSelector((state)=>state.numberingWizard)
const dispatch= useAppDispatch()
const stepperHorizontalData = ["Basic Info", "Cart Info", "Feedback", "Finish"];
                
                
const getUserData = (event: ChangeEvent<HTMLInputElement>) => {
  const name = event.target.name;
  const value = name === "agreeTerms" || name === "informationCheckBox" || (name === "agreeConditions") ? event.target.checked : (name === "uploadDocumentation") ? event.target.files && event.target.files[0].name : event.target.value;
  dispatch(setBasicInputFormValue({ ...basicInputFormValue, [name]: value }));
};
                
                return (
<Card className="height-equal">
  <CardBody className="basic-wizard important-validation">
    <div className="stepper-horizontal">
      {stepperHorizontalData.map((data, index) => (
        <div key={index} className={`stepper-one stepper step ${level > index + 1 ? "done active " : ""}`}>
          <div className="step-circle"><span>{index + 1}</span><div>
          <div className="step-title">{data}</div>
          <div className="step-bar-left"/>
          <div className="step-bar-right"/>
        </div>
      ))}
    </div>
    <div id="msform">
      {numberLevel === 1 && 
        <Form className="stepper-one g-3 needs-validation custom-input" noValidate>
          <Row>
          <Col sm="6" className="mb-3">
            <Label check>{Email}<span className="txt-danger">*</span></Label>
            <Input onChange={getUserData} value={email} name="email" type="email" placeholder={MofiMail} />
          </Col>
          <Col sm="6" className="mb-3">
            <Label check>{FirstName}<span className="txt-danger">*</span></Label>
            <Input onChange={getUserData} value={firstName} name="firstName" type="text" placeholder={EnterYourName} />
          </Col>
          <Col xs="12" className="mb-3">
            <Label check>{Password}<span className="txt-danger">*<span></Label>
            < onChange={getUserData} value={password} name="password" type="password" placeholder={EnterPassword} />
          </Col>
          <Col xs="12" className="mb-3">
            <Label check>{ConfirmPassword}<span className="txt-danger">*</span></Label>
            <Input onChange={getUserData} value={confirmPassword} name="confirmPassword" type="password" placeholder={EnterConfirmPassword} />
          </Col>
          <Col xs="12" className="mb-3">
            <FormGroup check>
              <Input id="inputCheckWizard" name="agreeTerms" onChange={getUserData} type="checkbox" checked={agreeTerms} required/>
              <Label className="mb-0" htmlFor="inputCheckWizard" check>{AgreeToTermsAndConditions}</Label>
            </FormGroup>
          </Col>
          </Row>
        </Form>
      }
      {numberLevel === 2 && <CartInfoForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />}
      {numberLevel === 3 && <FeedbackForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />}
      {numberLevel === 4 && <FinishForm />}
    </div>
    <div className="wizard-footer d-flex gap-2 justify-content-end">
      {numberLevel > 1 && (
        <Btn> className="alert-light-primary" color="transparent" onClick={()=> dispatch(handleBackButton())}>{Back}</Btn>
      )}
      <Btn disabled={showFinish ? true : false} color="primary" onClick={()=> dispatch(handleNextButton())}>{showFinish ? "Finish" : "Next"}</Btn>
    </div>
  </CardBody>
</Card>
);
};           

<!-- Redux file -->
import { createSlice } from "@reduxjs/toolkit";
import ShowError from "../../../Componant/FormLayout/common/ShowError";

const initialState = {
  numberLevel:1,
  basicInputFormValue: { email: "", firstName: "", password: "", confirmPassword: "", agreeTerms: false, placeHolderName: "", cardNumber: "", expiration: "", cvvNumber: "", uploadDocumentation: "", informationCheckBox: false, linkedInLink: "", gitHubLink: "", giveFeedBack: "", state: "", agreeConditions: false },
  showFinish:false
};

const NumberingWizardSlice = createSlice({
  name: "NumberingWizardSlice",
  initialState,
  reducers: {
    setBasicInputFormValue: (state,action) => {
      state.basicInputFormValue = action.payload
    },
    setShowFinish: (state,action) => {
      state.showFinish = action.payload
    },
    handleBackButton: (state) => {
      state.showFinish = false
      if (state.numberLevel === 2) {
        state.numberLevel = state.numberLevel - 1
      };
      if (state.numberLevel === 3) {
        state.numberLevel = state.numberLevel - 1
      };
      if (state.numberLevel === 4) {
        state.numberLevel = state.numberLevel - 1
      };
    },
    handleNextButton: (state) => {
      if (state.basicInputFormValue.email !== "" && state.basicInputFormValue.firstName !== "" && state.basicInputFormValue.password !== "" && state.basicInputFormValue.confirmPassword !== "" && state.basicInputFormValue.agreeTerms !== false && state.numberLevel === 1) {
        state.numberLevel = 2
      } else if (state.basicInputFormValue.placeHolderName !== "" && state.basicInputFormValue.cardNumber !== "" && state.basicInputFormValue.expiration !== "" && state.basicInputFormValue.cvvNumber !== "" && state.basicInputFormValue.informationCheckBox !== false && state.basicInputFormValue.uploadDocumentation !== "" && state.numberLevel === 2) {
        state.numberLevel = 3
      }
      else if (state.basicInputFormValue.linkedInLink !== "" && state.basicInputFormValue.gitHubLink !== "" && state.basicInputFormValue.giveFeedBack !== "" && state.basicInputFormValue.state !== "" && state.basicInputFormValue.agreeConditions !== false && state.numberLevel === 3) {
        state.numberLevel = 4
        state.showFinish = true
      } else {
        ShowError();
      }
    },
  },
});

export const { setBasicInputFormValue,setShowFinish,handleBackButton,handleNextButton } = NumberingWizardSlice.actions;

export default NumberingWizardSlice.reducer;