ContactInfo.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 { phone, address } = formData;

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

      <TextField
        type="tel"
        placeholder="+584245896324"
        labelText="Enter your Phone"
        name="phone"
        id="phone"
        value={phone}
        onChange={setForm}
      />
      <TextField
        type="text"
        placeholder="Caracas, Venezuela"
        labelText="Enter your Address"
        name="address"
        id="address"
        value={address}
        onChange={setForm}
      />

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