AuthInfo.tsx

import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import TextField from "./TextField";
import StepButtons from "./StepButtons";

// Component props
interface Props {
  formData: FormData;
  setForm: SetForm;
  navigation: NavigationProps;
}

export default function ({ setForm, formData, navigation }: Props) {
  // The values to this one step
  const { email, password, username } = formData;

  return (
    <>
      {/* This is a custom component which handle input onChange and other things... */}
      <TextField
        type="email"
        placeholder="hello@example.com"
        labelText="Enter your Email"
        name="email"
        id="email"
        value={email}
        onChange={setForm}
      />
      <TextField
        type="text"
        placeholder="johnDoe99"
        labelText="Enter your Username"
        name="username"
        id="username"
        value={username}
        onChange={setForm}
      />
      <TextField
        type="password"
        placeholder="********"
        labelText="Enter your Password"
        name="password"
        id="password"
        value={password}
        onChange={setForm}
      />

      {/* Next and previous buttons */}
      <StepButtons navigation={navigation} />
    </>
  );
}