Quiero enmascarar un Material UI TextField, y leyendo algunas soluciones en Internet obtuve este código:

 <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>

Pero me sale este 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)

Por lo tanto, no puedo pasar un TextField como elemento secundario para el componente InputMask.

También probé esta solución:

 <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>

Pero cuando inicio la aplicación, en la consola muestra este error:

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

Entonces, realmente no puedo usar ninguna solución para enmascarar mi MUI TextField. Estoy usando estas versiones:

 "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",

Y estoy usando Typescript y componentes funcionales.