how do I make the mask change on change a state?

[DenisLevy76]

I'm trying to change the mask options according to the value selected by the user in the select input, but the mask remains the same regardless of the selected value.

<div className="phone__container">
  //select the type of contact
  <SelectComponent
    id="phoneType"
    name="phone.type"
    value={phoneType}
    label={language.labels.phone.type}
    onChange={(e) => setPhoneType(e.target.value)}
    options={[
      { id: 1, value: 'smartphone', children: 'Celular' },
      { id: 2, value: 'telephone', children: 'Fixo' },
    ]}
  />
  //change the mask 
  {phoneType === 'telephone' ? (
    <InputComponent
      id="phoneNumber"
      name="phone.number"
      style={{ width: '100%' }}
      label={language.labels.phone.number}
      placeholder="{language.placeholders.phone.number}"
      required
      options={{
        numericOnly: true,
        delimiters: ['(', ')', ' ', '-'],
        blocks: [0, 2, 0, 4, 4],
      }}
    />
  ) : (
    <InputComponent
      id="smartphoneNumber"
      name="phone.smartphoneNumber"
      style={{ width: '100%' }}
      label={language.labels.phone.number}
      placeholder={language.placeholders.phone.number}
      required
      options={{
        numericOnly: true,
        delimiters: ['(', ')', ' ', '-'],
        blocks: [0, 2, 0, 5, 4],
      }}
    />
  )}
</div>