import React, { useState } from "react";
import { FaAngleLeft, FaAngleRight, FaRegPaperPlane } from 
"react-icons/fa6";
import { FileUpload, ParentInfo, StudentInfo } from "..";
import "./multistepForm.css";

const MultistepForm = () => {
const [step, setStep] = useState(0);
const [formData, setFormData] = useState({
stdName: "",
stdMiddleName: "",
stdSurname: "",
stdGender: "",
stdPOB: "",
stdDOB: "",
fatherName: "",
motherName: "",
gradeLevel: "",
grade: "",
// Parent Info
prtName: "",
prtMiddleName: "",
prtSurname: "",
prtNational: "",
prtCountry: "",
prtState: "",
prtCity: "",
prtEmail: "",
prtPhone: "",
prtIDType: "",
prtIDNum: "",
// Files
prtIDImg: "",
stdTranscript: "",
stdImg: "",
});
function next() {
setStep((i) => {
  if (i >= FormHeaders.length - 1) return i;
  return i + 1;
});
}
function back() {
setStep((i) => {
  if (i <= 0) return i;
  return i - 1;
});
}
function onSubmit(e: FormEvent) {
e.preventDefault();
if (step !== FormHeaders.length - 1) return next();
alert("Submission completed");
}
const FormHeaders = [
"Student Information",
"Parent Information",
"Upload Files",
];

const StepDisplay = () => {
if (step === 0) {
  return <StudentInfo formData={formData} setFormData= 
{setFormData} />;
} else if (step === 1) {
  return <ParentInfo formData={formData} setFormData= 
{setFormData} />;
} else {
  return <FileUpload formData={formData} setFormData= 
{setFormData} />;
}
};
return (
<div className="form">
  <h2 className="form-title">Online Application</h2>
  <div className="progressbar">
    <div
      style={{
        width: step === 0 ? "33.3%" : step === 1 ? "66.6%" : 
"100%",
      }}
    ></div>
  </div>
  <div className="form-container">
    <h1 className="form-header">{FormHeaders[step]}</h1>
    <div className="form-body">
      <form onSubmit={onSubmit} action="#">
        {StepDisplay()}
        <div className="form-footer">
          {step !== 0 &&
            <button className="form-btn btn" onClick={back}>
              <FaAngleLeft />
            </button>
          }
          <button className="form-btn btn" type="submit">
            {step === FormHeaders.length - 1 ? (
              <i>
                <FaRegPaperPlane />
              </i>
            ) : (
              <i>
                <FaAngleRight />
              </i>
            )}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
);
};

export default MultistepForm;

I am building a React-Appwrite app and I am struggling with figuring out a way to use the info that will be inserted in my multistep form in the user’s portal. The project doesn’t have a Register form where I can use the Appwrite Auth, it uses an Application form, (I have to create a user manually on Appwrite) and I want that info to be called back in the user’s portal (name, surname, place of birth, etc).
How can I store the multistep form information on Appwrite and connect it with the right user, and once stored, how can I display it in the user portal?