title: setState doesn't render textfield inside of map function
body: <p>I tried to let users to modify their business info.
  One user may have more than one business.
  I put this info on</p>
  <pre><code>  const [franchises, setFranchises] = React.useState(null);
  </code></pre>
  <p>franchises will contain those kind of objects in array.</p>
  <p><a href="https://i.stack.imgur.com/OibSx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OibSx.png" alt="franchises" /></a></p>
  <p>I have an issue with onChange in textField components.
  It is not rendered when franchises state updated.</p>
  <p>I will share my code below.</p>
  <pre><code>export default function MyPage(props) {
  
   React.useEffect(() =&gt; {
      (async () =&gt; {
       if (auth.userExtraInfo.role === constant.role.washmate) {
          const washmates = await Promise.all(auth.userExtraInfo.washmateDocs.map((v) =&gt; {
            return api.getWashmate(v)
          }))
          setFranchises(washmates)
         
          setWashReturns(returnPointArray)
          
        } 
  
      })()
  
    }, [])
  
  let washmateView = (&lt;&gt;&lt;DesText&gt;매장 정보&lt;/DesText&gt;
      &lt;EmptySpace /&gt;
      {franchises &amp;&amp; franchises.map((v, i) =&gt; {
  
        return (&lt;&gt;
  
  
  
  
          &lt;FixableTextField
            title=&quot;본사 이름&quot;
            fixable={restitleFixable}
  
            onChange={(e) =&gt; {
  
              console.log(e.target.value)
              console.log(&quot;franchises modified&quot;, franchises)      ///will show changed franchises objects, but only one character will be added entirely.
              console.log(&quot;v?&quot;, v)
              let mArray = franchises
              mArray[i].data.storeName = e.target.value
  
              setFranchises(mArray)
            }}
            value={franchises[i].data.storeName}                  ///!!!!Here is the problem !!!!!
            fixButtonTapped={() =&gt; {
              setRestitleFixable(!restitleFixable);
            }}
          /&gt;
  
          &lt;AddressForm
            fixable={addressFixing}
            bfixButton={true}
            mainAddress={mainAddress}
            setMainAddress={setMainAddress}
            restAddress={restAddress}
            setRestAddress={setRestAddress}
            fixButtonTapped={(a) =&gt; {
              if (addressFixing) {
                setAddressFixing(false);
              } else {
                setAddressFixing(true);
              }
              window.alert(mainAddress, restAddress);
            }}
          /&gt;
        &lt;/&gt;)
      })}
  
    &lt;/&gt;)
  
  return (
      &lt;Page&gt;
        &lt;AppBar backLink=&quot;/main&quot; menu={true} /&gt;
        &lt;EmptySpace /&gt;
        &lt;SubTitle&gt;내정보&lt;/SubTitle&gt;
        &lt;EmptySpace /&gt;
        &lt;UpText&gt;이메일&lt;/UpText&gt;
        &lt;OutLinedTextField value={auth.user.email} disabled /&gt;
        &lt;Link href=&quot;/forgotpassword&quot; justifycontent=&quot;flex-end&quot;&gt;
          비밀번호 변경하기
        &lt;/Link&gt;
        &lt;EmptySpace /&gt;
        &lt;EmptySpace /&gt;
        &lt;EmptySpace /&gt;
        &lt;UpText&gt;파트너스 종류&lt;/UpText&gt;
        &lt;OutLinedTextField value={role} disabled /&gt;
        &lt;EmptySpace /&gt;
        &lt;EmptySpace /&gt;
        &lt;EmptySpace /&gt;
        {auth.userExtraInfo.role === constant.role.franchise &amp;&amp; franchiseView}
        {auth.userExtraInfo.role === constant.role.washmate &amp;&amp; washmateView}
        {console.log(washmateView)}
  
        {/* washmate, franchise */}
        &lt;EmptySpace /&gt;
        &lt;EmptySpace /&gt;
        {/* deleiveryView */}
        {auth.userExtraInfo.role === constant.role.delivery &amp;&amp; deliveryView}
  
        &lt;EmptySpace /&gt;
  
        &lt;ContainedButton&gt;회원탈퇴&lt;/ContainedButton&gt;
        &lt;ContainedButton&gt;로그아웃&lt;/ContainedButton&gt;
        &lt;EmptySpace /&gt;
      &lt;/Page&gt;
    );
  }
  
  </code></pre>
  <p>Here is FixableTextField components</p>
  <pre><code>export default function FixableTextField(props) {
    const fixable = props.fixable;
  
    const marginSide = css.marginSide;
    const bothMarginside = marginSide * 2;
    const marginTop = css.marginTop;
    return (
      &lt;&gt;
        &lt;UpText&gt;{props.title} &lt;/UpText&gt;
        &lt;div style={{ width: &quot;100%&quot; }}&gt;
          &lt;TextField
            variant=&quot;outlined&quot;
            disabled={!fixable}
            value={props.restAddress}
            {...props}
            style={{
              margin: `${marginTop}px ${marginSide}px`,
              width: `calc(100% - ${marginSide * 2}px)`
            }}
          &gt;&lt;/TextField&gt;
  
          &lt;Link
            onClick={() =&gt; {
              props.fixButtonTapped();
            }}
            justifycontent=&quot;flex-end&quot;
          &gt;
            {props.fixable ? &quot;완료&quot; : &quot;수정&quot;}
          &lt;/Link&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>This code will give me output of only one character added by pressing any input.
  (for example, carwash + pressing ta, will give me only carwasha)</p>
  <p><a href="https://i.stack.imgur.com/hlo9h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hlo9h.png" alt="enter image description here" /></a></p>
  <p>storeName : 워시메이트 was original value,
  when I pressed 1 to 4,
  I got this result.</p>
  <p>I've investigated the variable washmateView, So put this code in parent directly, but have same result.</p>
  <p>Another trial was putting FixableTextfield component directly in the parent, but have same result.</p>
  <p>I am thinking the issue caused by map function.</p>
  <p>If anyone knows reason why or a way of writting correct code,
  let me know.
  thank you.</p>