title: ReactJs - Input Component behaves strangely when its returned from a function
body: <p><strong>Scenario</strong></p>
  <p>I declared a react component that renders a simple html input tag.</p>
  <pre class="lang-js prettyprint-override"><code>const MyComponent = (props) =&gt; (
    &lt;input
      defaultValue=&quot;test&quot;
      onChange={(e) =&gt; {
        props.setTitle(e.target.value);
      }}
    /&gt;
  );
  </code></pre>
  <p>Then I declared a function that takes a <code>setState</code> as a parameter and returns that component with the <code>setState</code> inside the input's <code>onChange</code>.</p>
  <pre class="lang-js prettyprint-override"><code>const getComponent = (setTitle) =&gt; (props) =&gt; (
    &lt;input
      defaultValue=&quot;test&quot;
      onChange={(e) =&gt; {
        setTitle(e.target.value);
      }}
    /&gt;
  );
  </code></pre>
  <p>Then I called my function to get the component and to render it:</p>
  <pre class="lang-js prettyprint-override"><code>const Root = () =&gt; {
    const [title, setTitle] = React.useState('');
    const Component = getComponent(setTitle);
    return (
      &lt;div&gt;
        &lt;div&gt;{title}&lt;/div&gt;
        &lt;Component /&gt;{' '}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><strong>Expected:</strong>
  The input element behaves normally, and changes its value</p>
  <p><strong>Reality:</strong>
  The input loses focus after each character typed, and won't retain its value.</p>
  <p>Here is a simple example of the error:
  <a href="https://codesandbox.io/s/interesting-spence-vgk00?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox</a></p>