BasicInfo.tsx

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

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

export default function ({ setForm, formData, navigation }: Props) {
  const { name, lastName } = formData;

  return (
    <>
      <h2 className="Title">Basic Info</h2>

      <TextField
        type="text"
        placeholder="John"
        labelText="Enter your Name"
        name="name"
        id="name"
        value={name}
        onChange={setForm}
      />
      <TextField
        type="text"
        placeholder="Doe"
        labelText="Enter your Last Name"
        name="lastName"
        id="lastName"
        value={lastName}
        onChange={setForm}
      />

      <StepButtons navigation={navigation} withPrevious />
    </>
  );
}