I have a list of options

const values = [
      { firstName: 'John',
        id: 'text'
      }.
      {
        userId: 123,
        id: 'number'
      }
];

The logic is that the user selects one of the values (firstName) and an input field will be generated of the type 'string'. If the user selects userId, then a text input will be generated of the type 'int'. I need to create a logic where the user will be able to select another option from the drop-down and a text field should be generated. For example, if the option selected is True or another number and it should provide a boolean or an integer text field. I am also using immutability helper to update the type, but I did not clearly understand much from the official docs. Any idea on how to implement this with react?

Here is my immutability helper function

const setValueType = (type: string, index: number) => {
    if (index < 0 || index >= data.values.length) {
        return;
    }
    setValueData(update(data, {
        values: {
            [index]: {
                type: { $set: type }
            }
        }
    }));
};
const setPlaceholder = (placeHolder: any, index: number) => {
    if (index < 0 || index >= data.values.length) {
        return;
    }
    setValueData(update(data, {
        values: {
            [index]: {
                placeHolder: { $set: placeHolder }
            }
        }
    }));
}

I am using 'setValueType' function to update the type, and 'setPlaceHolder' to set a display text, I have to come up with a way where I will be adding new options to the drop-down, but they should render conditionally based on the type.

I am thinking that I have to pass an if-else condition in the 'setValueType' function, but I am not sure on implementing it.