title: Losing focus on input field after typing a character in React with redux-form library
body: <p>I'm working in React with <strong>redux-form</strong> library. I would like to create simple form with 2 fields in functional component. After typing just 1 character in one of them I lose focus. I have created function <strong>renderInput</strong> which return Material UI TextField inputs. With native HTML input I can observe the same error. I tried to move <strong>renderInput</strong> to component inside but it haven't helped me.</p>
  <p>Below I show my functional component implementation:</p>
  <pre><code>import React from &quot;react&quot;;
  import {Field, InjectedFormProps, reduxForm} from &quot;redux-form&quot;;
  
  import IStream from &quot;./types/Istream&quot;;
  import {CommonFieldProps, GenericField, WrappedFieldProps} from &quot;redux-form/lib/Field&quot;;
  import {TextField} from &quot;@material-ui/core&quot;;
  import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme: Theme) =&gt;
      createStyles({
          root: {
              '&amp; .MuiTextField-root': {
                  margin: theme.spacing(1),
                  width: '25ch',
              },
          },
      }),
  );
  
  export const streamMethods = () =&gt; {
      const renderInput = (formProps: WrappedFieldProps): JSX.Element =&gt; {
          return (
              &lt;TextField
                  required
                  id=&quot;outlined-required&quot;
                  value={formProps.input.value}
                  onChange={formProps.input.onChange}
              /&gt;
          );
      }
      return {
          renderInput,
      }
  }
  
  const StreamCreate = (props: InjectedFormProps&lt;IStream&gt;) =&gt; {
      const classes = useStyles();
      return (
          (
              &lt;form className={classes.root}&gt;
                  &lt;Field name=&quot;title&quot; component={streamMethods().renderInput}/&gt;
                  &lt;Field name=&quot;description&quot; component={streamMethods().renderInput}/&gt;
              &lt;/form&gt;
          )
      )
  }
  
  export default reduxForm&lt;IStream, {}&gt;({
      form: &quot;streamCreate&quot;   // name of using form
  })(StreamCreate);
  </code></pre>