Cannot use react-input-mask with a children component in React

Question

I want to mask a Material UI TextField, and reading some solutions on internet I got this code:

       <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          {(inputProps: Props & TextFieldProps) => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

But it gets me this error:

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Props, context: any): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.ts(2769)

So I cannot pass a TextField as a children for InputMask component.

I also tried this solution:

        <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          <TextField
            id="outlined-basic"
            label="Teléfono"
            variant="outlined"
            style={{
              border: "2px solid #fff",
              borderRadius: "4px",
              color: "white",
            }}
            InputLabelProps={{ style: { color: "white" } }}
            sx={{ input: { color: "white" } }}
          />
        </InputMask>

But when I start the app, in console displays this error:

Uncaught Invariant Violation: react-input-mask: children must be a function

So really I cannot use any solution for masking my MUI TextField. I'm using this versions:

   "react": "^18.1.0",
   "react-dom": "^18.1.0",
   "react-input-mask": "^2.0.4",
   "@types/react": "^18.0.0",
   "@types/react-dom": "^18.0.0",
   "@types/react-input-mask": "^3.0.1",

And I'm using Typescript, and functional components.

Answer 1

The type definitions package you are using does not correspond to the version of the package. You should either:

• Downgrade @types/react-input-mask to 2.0.4 to match the package
• Or upgrade react-input-mask to version 3.0.0-alpha.2 to match the typing.