title: React material-UI custom input for TextField
body: <p>I'm trying to integrate the material-UI TextField with <a href="https://www.npmjs.com/package/react-payment-inputs?activeTab=readme" rel="nofollow noreferrer">react-payment-inputs</a> library.</p>
  
  <p>For example I use this library like this:   </p>
  
  <pre><code>import {usePaymentInputs} from 'react-payment-inputs';    
  const { getCardNumberProps} = usePaymentInputs();
  &lt;input {...getCardNumberProps({
                      onChange: handleCardChange('number'),
                      onFocus: handleFocus('number'),
                      placeholder: ''
                  })}/&gt;
  </code></pre>
  
  <p>I need to pass all input props using the <strong>react-payment-inputs</strong> library<br>
  I want to wrap this input with the nice <strong>TextField</strong> <strong>label</strong> effect.<br>
  I cannot see how can I send custom input element with custom props to TextField.   </p>
  
  <p>This is for example also not working:</p>
  
  <pre><code> &lt;TextField label="First name"
                      InputProps={{
                          input: &lt;input type="text" value={cardInfo.name}
                                        onChange={handleFirstNameChange} onFocus={handleFocus('name')}/&gt;
                      }}
                  /&gt;
  </code></pre>
  
  <p>Here is the <a href="https://codesandbox.io/s/create-react-app-template-7kj0z" rel="nofollow noreferrer">codesandbox</a></p>