Multi-step form in Ionic 6 React using react-hook-form and swiper/react

Question

I'm trying to create a multi-step form with react-hook-form, ionic 6 and swiper/react.

Followed this tutorial https://github.com/aaronksaunders/react-hook-form-wizard-example but it uses ionic 5 while some components like ion-slides is deprecated

import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";

import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { chevronBackOutline } from "ionicons/icons";
import { SignupForm } from "@interfaces/index";
import { useHistory } from "react-router";
import { Swiper, SwiperSlide } from "swiper/react";
import BasicInfo from "@components/Individual/BasicInfo/BasicInfo";
import PasswordInfo from "@components/Individual/PasswordInfo/PasswordInfo";
import { useSwiper } from "swiper/react";

const Signup: React.FC = () => {
  const swiperRef = useSwiper();
  const history = useHistory();
  const methods = useForm<SignupForm>({
    defaultValues: {
      userType: "Individual",
      email: "",
      username: "",
      fullName: "",
      password: "",
      confirmPassword: "",
    },
  });

  const { handleSubmit, trigger } = methods;

  const onSignup: SubmitHandler<SignupForm> = (data) => {
    console.log(data)
  };

  useEffect(() => {
    // lock the swipe on initialization of the component, so users can't swipe
  });

  const next = async (fields: any) => {
    // get the fields on each swipe
    const result = await trigger(fields);
    // Unlock the swipe and move to next slide on Button Click
  };

  const prev = () => {
   // Unlock the swipe and move to prev slide on Button Click
  };

  return (
    <IonPage>
      <IonHeader className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton
              color="primary"
              icon={chevronBackOutline}
              defaultHref="/"
            />
          </IonButtons>
          <IonTitle className="title">Signup</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onIndividualSignup)}>
            <Swiper speed={400} initialSlide={0}>
              <SwiperSlide>
                <BasicInfo next={next} />
              </SwiperSlide>
              <SwiperSlide>
                <PasswordInfo next={next} prev={prev} />
              </SwiperSlide>
            </Swiper>
          </form>
        </FormProvider>
      </IonContent>
    </IonPage>
  );
};

export default Signup;

BasicInfo.tsx

import {
  IonButton,
  IonIcon,
  IonInput,
  IonItem,
  IonLabel,
  IonText,
} from "@ionic/react";
import { Controller, useFormContext } from "react-hook-form";

import { mailOpenOutline, personOutline } from "ionicons/icons";

const BasicInfo: React.FC<{ next: any }> = (props) => {
  const { next } = props;
  const { control } = useFormContext();
  return (
    <div>
      <IonText className="ion-text-center">
        <h5 className=" mb-8">Basic Information</h5>
      </IonText>
      <IonItem disabled lines="inset" className="mb-3 ion-align-items-center">
        <IonLabel position="floating">UserType</IonLabel>
        <Controller
          control={control}
          name="userType"
          render={({ field: { value, onBlur, onChange } }) => (
            <IonInput
              type="text"
              onIonBlur={onBlur}
              value={value}
              onInput={onChange}
              onIonChange={onChange}
            />
          )}
        />
      </IonItem>
      <IonItem lines="inset" className="mb-3 ion-align-items-center">
        <IonLabel position="floating">Email Address</IonLabel>
        <Controller
          control={control}
          name="email"
          render={({ field: { value, onBlur, onChange } }) => (
            <IonInput
              type="email"
              onIonBlur={onBlur}
              value={value}
              onInput={onChange}
              onIonChange={onChange}
            />
          )}
        />
        <IonIcon
          slot="end"
          color="secondary"
          size="small"
          icon={mailOpenOutline}
        />
      </IonItem>
      <IonItem lines="inset" className="mb-3 ion-align-items-center">
        <IonLabel position="floating">Full Name</IonLabel>
        <Controller
          control={control}
          name="fullName"
          render={({ field: { value, onBlur, onChange } }) => (
            <IonInput
              type="text"
              onIonBlur={onBlur}
              value={value}
              onInput={onChange}
              onIonChange={onChange}
            />
          )}
        />
        <IonIcon
          slot="end"
          color="secondary"
          size="small"
          icon={personOutline}
        />
      </IonItem>
      <IonButton onClick={() => next(["email", "fullName"])}>Next</IonButton>
    </div>
  );
};

export default BasicInfo;