I am new to react and I have a dropdown list with some values, and I want to add a new input field upon selecting an option from the dropdown list. This is what I have so far,

import React, { useEffect } from 'react';

#creating an array of options
const options = [
    {
        name: 'First Name',
        id: 'text'
    }, 
    {
        name: 'Last Name',
        id: 'text'
    },
    {
        name: 'Phone',
        id: 'number'
    }
];

export const UserInputDefault = {
users: [], 
userId: []
}

#create component
const CreateNewUser = (data, setData) => {
    const setType = (type: string, index: number) => {
    if (index < 0 || index >= data.users.length) {
    return;
}
setData(update(data, {
    users: {
        [index]: {
            type: { $set: type }
        }
    }
}));
};

return (
      <div>
           <SelectList
                options={options}
                label="Input Type"
                action={(value: string) => {setType(value, index)}}
                selectedOption={data.questions[index].type}
            />
            <br/>
            #text input component 
            <TextInput
                variant="outlined"
                label="Display Text"
                value={data.questions[index].displayText}
                variables={[]}
                setValue={(value: any) => {setDisplayText(value, index)}}
                mode="html"
                error={Boolean(error?.displayText?.index === index && error?.displayText)}     
            />
      </div>
     );
}
export default CreateNewUser;

I am a little lost after this. I want the user to be able to select an option (First Name / Last Name / Phone) conditionally from the dropdown and a new input element should be inserted on selecting an option.