dynamic defaultCountry state goes infinite loop

[sgarchavada]

I just install this package today

if I simply use like this defaultCountry={"SG"} it working fine

if I do this, my page will hang. it goes infinite loop defaultCountry={formik.values?.countryCode ? formik.values?.countryCode as MuiTelInputCountry : 'SG'}

In my current scenario I have other Country Select, in which I am getting country code like this

<Grid item xs={12} md={6} alignItems='center'>
        <InputFieldLabel label={'Country *'} />
        <SelectVariants
          label={''}
          values={countries}
          onChange={value => {
            formik.setFieldValue('country', value)
            const countryCode = countries.find(i => i.country.toLowerCase() == value.toLowerCase())?.countryCode ?? ''
            formik.setFieldValue('countryCode', countryCode)

            if (value) {
              setCountryID(value)
            }
          }}
          labelKey='country'
          valueKey='country'
          value={countries.find(i => i.country.toLowerCase() == formik.values.country.toLowerCase())?.country || null}
          error={formik.touched.country && Boolean(formik.errors.country)}
          helperText={formik.touched.country && formik.errors.country}
          size={'small'}
        />
      </Grid>

and here i am passing dynamic country code like this, which is going infinite.

 <MuiTelInput
          fullWidth
          label=''
          forceCallingCode
          defaultCountry={"SG"}
        //  defaultCountry={formik.values?.countryCode ? formik.values?.countryCode as MuiTelInputCountry : 'SG'}
          name='phone'
          variant='outlined'
         // onlyCountries={finalCountriesList ? [...finalCountriesList as any]: ["SG"]}
          inputProps={{ autoComplete: 'off', maxLength: 16 }}
          disableFormatting
         // countryCodeEditable={true}
          sx={{
            '.MuiInputLabel-outlined': {
              color:
                formik.touched.phone && Boolean(formik.errors.phone) ? 'initial' : 'rgba(58, 53, 65, 0.68) !important'
            },

            '.MuiOutlinedInput-notchedOutline': {
              color: 'rgba(58, 53, 65, 0.87)',
              borderColor:
                formik.touched.phone && Boolean(formik.errors.phone) ? 'initial' : 'rgba(58, 53, 65, 0.22) !important'
            }
          }}
          value={formik.values.phone?.toString()}
          onChange={val => {
            formik.setFieldValue('phone', val)
          }}
          onBlur={formik.handleBlur}
          className={formik.touched.phone && formik.errors.phone ? 'has-error': ''}
          error={formik.touched.phone && Boolean(formik.errors.phone)}
          helperText={formik.touched.phone && formik.errors.phone}
          size={'small'}
        />

[viclafouch]

Hello !

Could you share a codesandbox for repro plz ?