I am new to react and i am trying to build a reusable component from the logic below, a form with many steps.

Please note:

• The next person using this component can add as many steps as they want.
• The next person using this component should be able to add as many fields they want. more than firstName and lastName.

React 16.9

original codes

interface Props {    state: Object,};const Foo = (props: Props) => {  const [state, setState] = useState({    step: 1,    firstName: '',    lastName: '',  });  const handleChange = (e) => {    e.preventDefault();    setState({...state, [e.target.name]: e.target.value});  }  const showSteps = () => {    if (state && state.step === 1)      return (<PersonalInfo          handleChange = {handleChange}          nextStep = {nextStep}          firstName = {state.firstName}          lastName = {state.lastName}        />);

reusable component attempt with interface

interface Props {    state: Object;    step: number;    field: String;};const Foo = (props: Props) => {  const [state, setState] = useState<Props>({    step: props.step,    field: props.field,  });  const handleChange = (e) => {    e.preventDefault();    setState({...state, [e.target.name]: e.target.value});  }  const showSteps = () => {    if (state && state.step === state.step)      return (<PersonalInfo          handleChange = {handleChange}          field = {state.field}        />);  }

I am not sure on my approach to create the reusable component and I look forward to your feedbacks.