title: Cannot use react-input-mask with a children component in React
body: <p>I want to mask a Material UI TextField, and reading some solutions on internet I got this code:</p>
  <pre><code>       &lt;InputMask
            mask=&quot;(0)999 999 99 99&quot;
            value={phone}
            disabled={false}
            onChange={handleChange}
          &gt;
            {(inputProps: Props &amp; TextFieldProps) =&gt; (
              &lt;TextField
                {...inputProps}
                type=&quot;tel&quot;
                label={t(&quot;addDriverModal.phone&quot;)}
              /&gt;
            )}
          &lt;/InputMask&gt;
  </code></pre>
  <p>But it gets me this error:</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: Props | Readonly&lt;Props&gt;): ReactInputMask', gave the following error.
      Type '(inputProps: Props &amp; TextFieldProps) =&gt; JSX.Element' is not assignable to type 'ReactNode'.
    Overload 2 of 2, '(props: Props, context: any): ReactInputMask', gave the following error.
      Type '(inputProps: Props &amp; TextFieldProps) =&gt; JSX.Element' is not assignable to type 'ReactNode'.ts(2769)
  </code></pre>
  <p>So I cannot pass a TextField as a children for InputMask component.</p>
  <p>I also tried this solution:</p>
  <pre><code>        &lt;InputMask
            mask=&quot;(0)999 999 99 99&quot;
            value={phone}
            disabled={false}
            onChange={handleChange}
          &gt;
            &lt;TextField
              id=&quot;outlined-basic&quot;
              label=&quot;Teléfono&quot;
              variant=&quot;outlined&quot;
              style={{
                border: &quot;2px solid #fff&quot;,
                borderRadius: &quot;4px&quot;,
                color: &quot;white&quot;,
              }}
              InputLabelProps={{ style: { color: &quot;white&quot; } }}
              sx={{ input: { color: &quot;white&quot; } }}
            /&gt;
          &lt;/InputMask&gt;
  </code></pre>
  <p>But when I start the app, in console displays this error:</p>
  <pre><code>Uncaught Invariant Violation: react-input-mask: children must be a function
  </code></pre>
  <p>So really I cannot use any solution for masking my MUI TextField.
  I'm using this versions:</p>
  <pre><code>   &quot;react&quot;: &quot;^18.1.0&quot;,
     &quot;react-dom&quot;: &quot;^18.1.0&quot;,
     &quot;react-input-mask&quot;: &quot;^2.0.4&quot;,
     &quot;@types/react&quot;: &quot;^18.0.0&quot;,
     &quot;@types/react-dom&quot;: &quot;^18.0.0&quot;,
     &quot;@types/react-input-mask&quot;: &quot;^3.0.1&quot;,
  </code></pre>
  <p>And I'm using Typescript, and functional components.</p>