I have a pair of select and input field as Add field 1 and Add value 1 Fields Image with a plus icon which adds another pair of fields. What I am trying to do is based on the options field type selected I need to change the first Input field as type"text" or as date picker but my second pair input field must not change.

    const [changeInputs, setChangeInputs] = useState(
  {
    date_pic: false,
    str_field: false,
    decimal: false,
    number: false,
  }
)

useEffect(() => {
  if (inputs.CATS_AddField !== "") {
    for (let i = 0; i < addFieldOptions.data.cats_addfields.length; i++) {
      if (addFieldOptions.data.cats_addfields[i].fieldtype === 'String'){
        console.log('::String::');
        setChangeInputs(values => ({...values, str_field: true, date_pic: false, decimal: false, number: false}))
      }
      else if (addFieldOptions.data.cats_addfields[i].fieldtype === 'Date') {
        console.log('::Date::');
        setChangeInputs(values => ({...values, date_pic: true, decimal: false, number: false, str_field: false}))
      }
      else if (addFieldOptions.data.cats_addfields[i].fieldtype === 'Decimal') {
        console.log('::Decimal::');
        setChangeInputs(values => ({...values, decimal: true, number: false, str_field: false, date_pic: false}))
      }
      else if (addFieldOptions.data.cats_addfields[i].fieldtype === 'Number') {
        console.log('::Number::');
        setChangeInputs(values => ({...values, number: true, str_field: false, date_pic: false, decimal: false}))
      }
      else {
        console.log('::none::');
        setChangeInputs(values => ({...values, str_field: false, date_pic: false, decimal: false, number: false}))
      }
    }
  }
  else <></>
}, [inputs.CATS_AddField])