viclafouch / mui-tel-input

📌 A phone number input designed for MUI (Material ui) V5 built with libphonenumber-js

Material UI tel input

A phone number input designed for the React library Material UI

Installation

// with npm
npm install mui-tel-input

// with yarn
yarn add mui-tel-input

The component uses libphonenumber-js for phone number parsing and formatting.

Usage

import React from 'react'
import { MuiTelInput } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return <MuiTelInput value={value} onChange={handleChange} />
}

Documentation

Changelog

Go to GitHub Releases

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

LICENSE

MIT

mui-tel-input's Issues

Search Country not working in react Typescript

By pressing alphabet, Search Country is not working in react Typescript. I used mui-tel-input for react with typescript. But when press a letter, the country not search.

Getting error with while using with react-hook-form with typescript

Hi.
I was following your documentation while using it in my project. Funny thing is it is working when I am using yarn version 3+. But when I am switching to version 1.22.19. It is throwing me an error reguarding typescripts. Now it was working fine before with version 1.22.19. But suddenly is stopped working. Anyway, I am posting my code below.

import { matchIsValidTel, MuiTelInput } from "mui-tel-input";
import { Controller, useForm } from "react-hook-form";
interface SignUpProps {
  phone_number: string;
}

const SignUpForm = () => {
  const { control } = useForm<SignUpProps>();

  return (
    <Controller
      name="phone_number"
      control={control}
      rules={{
        validate: matchIsValidTel,
        required: {
          value: true,
          message: "Phone Number is required",
        },
      }}
      defaultValue="+880"
      render={({ field, fieldState: { error } }) => (
        <MuiTelInput
          fullWidth
          size="small"
          label="Your Phone Number"
          preferredCountries={["BD"]}
          error={Boolean(error)}
          sx={{
            my: 0.2,
          }}
          helperText={
            error && ((error?.message as string) || "Invalid Phone Number")
          }
          {...field}
        />
      )}
    />
  );
};

export default SignUpForm;

The error:

(property) control?: Control<FieldValues, any> | undefined
Type 'Control<SignUpProps, any>' is not assignable to type 'Control<FieldValues, any>'.
  Types of property '_reset' are incompatible.
    Type 'UseFormReset<SignUpProps>' is not assignable to type 'UseFormReset<FieldValues>'.
      Types of parameters 'values' and 'values' are incompatible.
        Type 'FieldValues | { [x: string]: any; } | ResetAction<FieldValues> | undefined' is not assignable to type 'SignUpProps | { phone_number?: string | undefined; } | ResetAction<SignUpProps> | undefined'.
          Type 'ResetAction<FieldValues>' is not assignable to type 'SignUpProps | { phone_number?: string | undefined; } | ResetAction<SignUpProps> | undefined'.
            Type 'ResetAction<FieldValues>' is not assignable to type 'ResetAction<SignUpProps>'.
              Type 'FieldValues' is not assignable to type 'SignUpProps'.ts(2322)
controller.d.ts(22, 5): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<FieldValues, "phone_number">; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElement<...>; } & UseControllerProps<...>'

After some digging I have found that if I remove the validate: matchIsValidTel from the rules props then the error goes away. But with that I am loosing the ability to validate phone numbers.

I am new with typescript.
Now I have two questions.

1. How can I fix this?
2. Why is it working with yarn version 3+ but not with the classick version?

Feature Request: AutoComplete Search Bar in FlagsList

Hi!

Is it possible to add search functionality for the FlagsList component so that we're able to search for the appropriate country via the displayName, isoCode and the actual countryCode itself?

I've been playing around with a fork and the Autocomplete component from MUI seems to tick most of the boxes for an implementation of this.

Issue loader webpack

Can you check this issue, I can't use it

Thanks for sharing, Looking forward to hearing from you.

React hook form implementation doesn't return error on load

Here is a code snipped and screenshot attached, I am using react hook form implementation and when I edit phone number already saved in the system, It does not return error on load.

If I edit that same some then it make input field invalid but still empty message is returning```

export const PhoneInput = ({
  prefix,
  register,
  validation = { phone: true },
  readonly,
  errors,
  onChange,
  control,
}) => {
  return (
    <>
      <Controller
        name="phone"
        control={control}
        rules={{
          required: validation["phone"],
          validate: matchIsValidTel,
          pattern: {
            value: PHONE_REGEX,
            message: "Please enter a valid phone number",
          },
        }}
        render={({ field: { ref, ...field }, fieldState }) => {
          return (
            <MuiTelInput
              {...field}
              inputRef={ref}
              inputProps={{ readOnly: readonly }}
              InputLabelProps={{ shrink: true }}
              error={!!errors.phone}
              forceCallingCode
              focusOnSelectCountry
              preferredCountries={["US"]}
              defaultCountry="US"
              variant="standard"
              {...commonProps("phone", "", "Phone", validation["phone"])}
            />
          );
        }}
      />
      <ErrorInfo errors={errors} name="phone" prefix={prefix} />
    </>
  );
};

Padding off for filled variant (variant="filled")

Hey folks, I'm giving your library and try and need to style the phone input as a filled field.

What I see is there's a difference in padding between the default (non-filled) and the filled variant; see below

Is this an issue in mui-tel-input where we need to special case the filled variant or style it differently?

Here's how to reproduce: go e.g. to this example's code sandbox and add variant="filled"

https://viclafouch.github.io/mui-tel-input/docs/react-hook-form/

Make menuItem accessible for keyboard inputs

Thanks for the library, we are enjoying it!

Because you use an MUI Menu with MenuItem, I would have expected the following behavior.
Pressing the letter "B" on my keyboard while the dropdown is open should go to the first country that starts with the letter B.

This is the default behavior of MUI and I'm not exactly sure why it isn't working here. https://mui.com/material-ui/react-menu/#main-content

Steps to reproduce
Open the flagsMenu, press a letter of the country that you are looking for, and nothing happens.

I tried debugging it myself, but couldn't get it to work fully...
When placing a dummy <MenuItem /> right above the <FlagsList .../> (so it's the first element) then it did work. 🙀

Passing invalid number to mui-tel-input does not display invalid number.

Hi,

I am using mui-tel-input in my react app. input works fine when I add a number, either valid or invalid but if we have already saved the number coming from the API. It does not show those numbers in the mui-tel-input field.

Does the library support this on loading?

Feature Request: customize the unknown flag placeholder

In order to style this (awesome!!) input field a bit more, it would be nice if we can customize the 'no flag' / unknown flag placeholder.

I see it is now imported statically on the level of the Flag component, so it's a bit tricky to see how to change it in a simple way.

Cursor jumps to end of input

@viclafouch ,

Thanks for sharing your work onmui-tel-input, it's the the best React / MUI implementation I've found yet.

When editing a digit in the middle of the phone number string, upon becoming valid or invalid, the cursor jumps to the end. This makes it impossible to easily edit the area code or correct a typo.

How to reproduce:

1. Enter [phone]
2. Select the area code and change it to [phone]

The user must keep repositioning the cursor back to the edit point.

Configuration being used:

     <MuiTelInput
          onlyCountries={['US', 'MX', 'CA']}
          forceCallingCode={true}
          defaultCountry={"US"}
          value={value}
          onChange={handleChange}
          error={!isValid}
      />

Auto fill with country code won't be applied

Hi there, Thanks for this amazing library!
I have one issue which is that it won’t recognize auto fill phone number with country code(eg [phone]).The input field will remain empty. Just wondering are there any plans for fixing this issue. Thanks!

[Enhancement] add wrapper for React Final Form

Hello,

I had some problems integrating the phone input into RFF but got it working now.

Here is my code, maybe we can have it as a integration into this package itself or add it to the docs:

import { MuiTelInput, matchIsValidTel } from 'mui-tel-input';
import { Field } from 'react-final-form';

function showErrorOnChange({
  meta: { submitError, dirtySinceLastSubmit, error, touched, modified }
}) {
  return !!(
    ((submitError && !dirtySinceLastSubmit) || error) &&
    (touched || modified)
  );
}

function PhoneWrapper(props) {
  const {
    input: { name, value, onChange, onBlur, onFocus, ...restInput },
    meta,
    required,
    fullWidth = true,
    helperText,
    showError = showErrorOnChange,
    ...rest
  } = props;

  const { error, submitError } = meta;
  const isError = showError({ meta });

  return (
    <MuiTelInput
      fullWidth={fullWidth}
      helperText={isError ? error || submitError : helperText}
      error={isError}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
      name={name}
      value={value}
      required={required}
      inputProps={{ required, ...restInput }}
      {...rest}
    />
  );
}

function PhoneInput(props) {
  const { name, fieldProps, ...rest } = props;

  return (
    <Field
      validate={(value) => {
        if (value && matchIsValidTel(value)) {
          return undefined;
        } else {
          return 'Enter valid phone number';
        }
      }}
      name={name}
      render={({ input, meta }) => (
        <PhoneWrapper input={input} meta={meta} name={name} {...rest} />
      )}
      {...fieldProps}
    />
  );
}

export default PhoneInput;

And when using a form it can easily used by

<PhoneInput
              label='Phone'
              name='phone'
              required
              defaultCountry='DE'
            />

Javascript default parameters: Support

Getting the follow warning in the dev environment:

Warning: we: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

seems like a easy fix to migrate defaultProps --> default parameters

Could not works for `canada` , `+1`

https://codesandbox.io/s/mui-tel-input-p7b2jz?file=/src/App.js

1. choose canada/us +1

2. typings any number like [phone]

it seems that +1 has some bugs here ?

BTW please allow us filter while choose dropdown countries (MUI select control like)

Typo on the docs

Didn't know where to put this. It's just a typo on your documentation. Thanks you for your job on this library!

Demo breaks in v1.3.0

Just wanted to raise a flag here.

I tried accessing the demo https://codesandbox.io/s/mui-tel-input-p7b2jz

I had to downgrade to v1.1.0 in order to make it work and also had to downgrade React to v17, it would't work in v18.

I'm thinking of using this library, should I use v1.1.0?

Input being erased when typing

I'm having trouble when typing into the text field, but every time I change the country or even type any sort of text in there, it would just reset.

                <MuiTelInput
                  id="phone"
                  helperText={(phoneError) ? 'Please enter your phone.' : undefined}
                  onBlur={(event) => handleFormBlur('phone', event.target.value)}
                  label="Phone"
                  error={phoneError}
                />

Feature request: Autoselect country on paste

I would like to have this functionality:

CCS = Current country selected

CCS: SK (+421)
paste phone number: [phone] (AT)
Country changes to AT (+43)

CCS: AT (+43)
paste phone number: [phone] (SK)
County changes to SK (+421)

Is it possible to implement this functionality? Thanks

Overriding styles for Countries Menu

This could completely be just me misusing Material overriding approaches but it looks like you can only override styles that are part TextField component and not the ones that come from the Menu, e.g:

.MuiTelInput-Menu
.MuiTelInput-MenuItem

And the rest of Menu-derived classNames. I believe this is because in the actual HTML, these are not children of the main Mui Tel Input component and since they're not children they don't even inherit any styling you may be passing to it.

Here's how I'm doing the overriding which works for TextField overrides but not for Menu overrides:

Please consider providing an example of how you'd override the predefined styles.

splitCallingCode not working while using with react-hook-form

<Controller
          name="tel"
          control={control}
          rules={{ validate: matchIsValidTel }}
          render={({ field, fieldState }) => {
            {
              console.log(field);
            }
            return (
              <MuiTelInput
                {...field}
                defaultCountry="BD"
                helperText={fieldState.invalid ? "Tel is invalid" : ""}
                error={fieldState.invalid}
                splitCallingCode
              />
            );
          }}
        />
``
The `console.log` is printing the value without country code. As a result `matchIsValidTel` can not validate the phone number.
If I remove the `splitCallingCode` props then the `field.value` has access to phone number with country code.

All optional attributes are required

I just installed the library and using it in the same way as your documentation, the component gets annoyed requiring all optional attributes as follows:

Type '{ value: string; onChange: (newPhone: any) => void; }' is missing the following properties from type 'Pick<MuiTelInputProps, "color" | "translate" | "margin" | "hidden" | "size" | "style" | "disabled" | "name" | "value" | "variant" | "classes" | "className" | ... 279 more ... | "continents">': color, translate, margin, hidden, and 274 more.ts(2740)

I didn't make any change to the simple usage.
Is there a possibility that you have a bug?

Thanks in advance

Module parse failed: Unexpected token

Hi,

I tried to use this library in a lerna project. After I install mui-tel-input dependancy an error starts to appear in the console when I run storybook.

ERROR in ./node_modules/mui-tel-input/dist/mui-tel-input.es.js 3645:8 Module parse failed: Unexpected token (3645:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | if (i && !T && (u.isoCode || e)) { | const V = +${m2(u.isoCode || e)}`;

  l?.(V, A("input")), g(V), w({

| isoCode: u.isoCode || e || null,
| inputValue: V
@ ./packages/react-ui/src/shared/MetadataField/MetadataField.tsx 50:19-43
@ ./packages/react-ui/src/shared/MetadataField/index.tsx
@ ./packages/react-ui/src/index.ts
@ ./.storybook/decorators.js
@ ./.storybook/preview.js
@ ./.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js`

Do you know wich loader I need to add in webpack configuration?

Thank you,

Federico

Bundle size

Hi @viclafouch,

I really appreciate your work and I really like your libphonenumber-js based approach on this package. 🚀 I started to use it in my own project insted of material-ui-phone-number.

However, I noticed this package has quite a big footprint. It takes 342.09 KB of space in my project which is nearly as big as the whole @mui package. Do you think it's possible to reduce the size?

Thanks!

Not needing to define the value and onChange props

What ?

For an external user, not needing to define value and onChange props of the MuiTelInput component.

Why ?

For a user that doesn't want to control the value everytime it changes - but only on submission - to lighten the code.

Example

Someone developing a form with a field corresponding to the phone number, the access to the value is only needed at the form validation.

On my opinion, we should be able to do something like:

import { FormControl } from "@mui/material";
import React, { FormEvent } from "react";
import { MuiTelInput } from "mui-tel-input";

const MyComponent = () => {
  const handleValidate = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const phoneNumber = data.get("phonenumber");
    // ... do anything with the value
  }

return (
  <FormControl
    component="form"
    onSubmit={handleValidate}>
      <MuiTelInput name="phonenumber" />
   </FormControl>
  )
}

How ?

I didn't dig that much in the source code, but I would guess that a default value for the value/onChange props would do the trick.

Reduce bundle size by using flagcdn

Hi,

Instead of using inline SVG's (and increasing the bundle) you can also pull images directly from flag cdn (see: https://flagpedia.net/download/api).

For example: https://flagcdn.com/20x15/be.webp returns the Belgian flag in webp format.

Would you be open for a PR for this?

Empty default phone number shows no country flag

Firstly great library!

I used it and wanted the default flag to be GB (i guess it doesn't matter which you want). In order to do that I tried having the value field set to '+44' I also tried '' and a few other permutations of silly things I thought it may be. Using all of these results in the same issue of the flag being undefined and having the default greyed out flag symbol.

In the end I had to input a default phone number of [phone] and then this meant I had to have a validation rule to accommodate this etc. etc. Not to mention it being a complete hack around.

If there is another way of doing this it would be nice to know and maybe update the docs but...

It would be great to have a prop that allows me to show a default flag with empty phone number value eg:

                     forceCallingCode
                     preferredCountries={['GB']}
                     onChange={handleChange}
                     value={''}
                     defaultCallingCode={'GB'}
        />```

and this could show the phone number field with a value of +44 and a flag of GB

UK Telephone Codes do not work properly

Thanks for the library once again!

When trying to enter a UK country code, the flag does not change, and the object does not recognise UK's countryCode or countryCallingCode.

Steps to reproduce

1. Place cursor on the textfield, backspace on the default country code, and enter +44.

Configuration being used is the default codesandbox playground.

This behaviour does not seem to be happening on any other countries, but I have not tried all.

Using forceCallingCode can't type number

When i use forceCallingCode i can't type number anymore and select a different country

TypeScript typings not included in published NPM bundle

The documentation says that typings are provided, and package.json refers to ./dist/index.d.ts for type definitions, and running npm run build on a copy of this repository does generate that file... but the published NPM package does not include that file, at least not in the current version (v3.1.2).

Handling a leading zero in a phone number after the country code

Any plans to handle the use case described in this issue from material-ui-phone-number?

I tried the same implementation approach, but the input breaks, and the field value isn't getting updated.

alexplumb/material-ui-phone-number#89

Thank you.

Feature Request: Does not allow more digits than the mask

Is it possible block for user not write more digits than the mask. It will avoid lost the mask when users write more digits the allowed to selected country.

Allow country code value to be controlled

I'm trying to use mui-tel-input in an application where users can add and edit phone numbers. I was planning to persist the country code in addition to the number so that the country code could be properly recalled for when users are editing phone numbers in ambiguous cases (i.e. when a country calling code is shared between multiple countries).

It appears MuiTelInput doesn't allow the country code to be controlled, just the value. I tried using the defaultCountry property to provide the current value of the country code but the component state seemed to reset when the value changed.

Is it possible you could allow the country code value to be controlled? Or would you suggest another approach for my use case?

How is the country list ordered?

I would expect to see the list in alphabetical order however it doesn't quite appear like that.

Selecting a different country code from dropdown automatically returns to default country code.

This is a great component. I recently discovered it. I am using it with two country codes MX and US with the default being MX. When I try to select US from the flags dropdown it quickly jumps back to MX. I am not sure if the error is in my code but I seem to have followed the instructions. The code:

<Grid item xs={12}> <MuiTelInput id = "cellPhone" forceCallingCode = "true" defaultCountry = "MX" onlyCountries = {["MX", "US"]} /> </Grid>

Make calling code separate from phone input

Is there any way to make the calling code not just not editable, but actually not part of the input field at all, but let's say part of the flag button?

Something like this:

Limit number of visible options

Hi! Thanks for the library - super helpful!

Just a quick question - I'm looking for a way to only show a limited number of options, maybe 10 at a time, and have the user scroll to see more. It would also be great if the number of options visible could be dynamic, and depend on the size of the screen. Any ideas would be much appreciated!

Cannot read properties of undefined (reading 'search')

I am testing the MUI Phone libraries and in this I get the following error

I have not yet put all the Props that I need but with the basic ones according to the Documentation

• mui-tel-input/docs/react-hook-form

Node Version: v14.15.0

Peer dependencies are specified in runtime dependencies

The dependencies in package.json contain all of the peerDependencies, which not only defeats the purpose of peer dependencies but also prevents TypeScript compilation of this package when run with other MUI packages at different versions.

https://github.com/mui/material-ui/blob/master/packages/mui-icons-material/package.json#L48-L67

Input doesnt work with formik & yup, it's always disabled

I try to use the phone input in a formik form, but it's permanently disabled and selecting a country doesnt work either:

      <MuiTelInput
        label='Phone'
        name='phone'
        placeholder='[phone]'
        value={formik.values.phone}
        onChange={formik.handleChange}
        error={formik.touched.phone && Boolean(formik.errors.phone)}
        helperText={formik.touched.phone && formik.errors.phone}
        flagSize='medium'
      />

it seems it can't support iOS 12.5, the libphonenumber-js it need Intl.DisplayNames

it seems it can't support iOS 12.5, the libphonenumber-js it need Intl.DisplayNames

it try react-phone-number-input it works fine on 12.5, and does this libararay support tree-sharking? it seems that the libphonenumber-js is very big

Integration with React Hook Form

First of all, thanks for the amazing job building mui-tel-input, great job!

My question is, there is any chance of mui-tel-input being updated so it can be used wit react-hook-form so we can use it inside forms and work with better validation schemas.

In my custom input component, we use somethinig like this, so we can pass the register property and destructure it inside our base mui component.

<CustomInput register={register} name="name" />

<OutlinedInput {...(props.register && props.name && props.register(props.name))} />

Attempted import error: 'matchIsValidTel' is not exported from 'mui-tel-input'.

Not sure this is exported properly...Running version 2.0.1

libphonenumber-js provides an option to get phone number type, could you add it as an export please?

Hi, firstly, this is fantastic, the best one I've found so far for material-UI, great work. 👏

I could really do with being able to import some of the other options from libphonenumber-js. I could just import the library myself into my codebase but seeing as you already provide an option to import the check for isValidNumber function I wondered if you thought it would make sense to also include the phone number type check?

For context, this is useful for me to know when to send a text message and when not i.e. landline vs mobile.

P.S. Side note: I noticed that the documentation for the integration with react-hook-form is referring to version 7 of react-hook-form but I use version 6, this took me a little while to figure out why it wouldn't work for me. Might be nice to specify this in case others run into the same problem 😊 other than that, great work!

EDIT: Thinking about it, it would make sense if the NumberType was passed back as part of the MuiTelInputInfo from the onChange event

FlagList menu improvement: sticky headers

Hi, many thanks for this great library.
Would it be possible to separate preferred countries from others adding sticky sub headers to the list?
https://mui.com/material-ui/react-list/#sticky-subheader

Many thanks,
Mauro

Disable formatting only in onChange call

First of all, thanks for this great library!

It would be great to have an option to only disable formatting for the value itself, and not the visual component. Currently to have this feature I do quite an ugly hack

onChange={(value, info) => formik.handleChange('phone')(info.numberValue || '')}

Changing country code reset all values in the field

When I change country code it reset all value, instead it should change only country code.

Steps

• edit phone number field
• change country

Observe

• country code is changed and phone number is wiped

Expected

• only the country code changes and leaves rest of number

Errors with react 18.0.17

./node_modules/mui-tel-input/dist/mui-tel-input.es.js 4426:8
Module parse failed: Unexpected token (4426:8)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     if (i && !j && (o.isoCode || e)) {
|       const O = `+${m2(o.isoCode || e)}`;
>       l?.(O, $("input")), g(O), f({
|         isoCode: o.isoCode || e || null,
|         inputValue: O

Restrict phone length

After selecting or typing the country code, it is possible to input an arbitrary number of symbols. It would be great if the component had a prop to restrict the number of symbols in the telephone number according to the selected country's standards.

onChange prop won't work with Formik

When using with Formik, we need to set the onChange prop to formik.handleChange since it will be handled via formik. However, when it's set in MuiTelInput, component values are not being updated as a result of following error.

    <MuiTelInput label="Phone No"
                             required
                             className="text-input"
                             onChange={formik.handleChange}
                             value={formik.phoneNo}
                             name="phoneNo"
                             id="phoneNo"/>

Type {(e: React.ChangeEvent<any>): void, <T_1=string | React.ChangeEvent<any>>(field: React.ChangeEvent<any>): void} is not assignable to type (value: string, info: MuiTelInputInfo) => void

However the issue can be fixed by adding a handleChange method instead of using formik's handleChange method directly and calling the formik's handleChange method inside it as follows.
This leads to having to add a additional state to maintain.

const handleTelNoChange = (newValue) => {
    setTelNo(newValue)
    formik.setFieldValue("phoneNo",newValue)
}

useRef Error

I'm trying to implement this library with React 18 on NextJS 12.1,

I'm getting the following (very non-descript) useRef error when using just the very basic settings. I've tried to rollback to previous versions, and it doesn't seem like a new bug. Any idea what could be causing the issue?

<MuiTelInput value={""} onChange={(val) => {}} />