Edit: The next version is 13.3.0

I have a state calledlocalArraythat I want to update only to a specific index, so I thought of creating a time variable to modify the array and update the state with the time value, the problem is, this state is not updated until It doesn't update until another status update or a quick refresh, I don't know why this happens

Here is a minimal reproducible example:

import { useState } from 'react' function Test() { const [someState, setSomeState] = useState(""); const [localArray, setLocalArray] = useState(["","","",""]) const handleArrayChanges = ( { target: { name, value } } ) => { let newArray = localArray; newArray[Number(name)] = value; setLocalArray(newArray); } return ( 
 
Array state
  <p> {localArray[0]}</p> <h4>Some other state</h4> <button onClick={() => {setSomeState("a")}}>Update some other state</button> </div> ) } export default Test</pre>
      <p>As you can see, after the array state is updated, the first element should be displayed on the paragraph, but it is not displayed until the cis case is explained</p>
     </div>
     <div class="share flexRow">
      <div class="shareReply flexColumn shareDiv">
       <a href="javascript:;"><img class="sharerImg" src="//m.sbmmt.com/static/images/images/icon50.png" data-id="1"></a>
       <span class="sharerSpan">1</span>
      </div>
      <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(172087)">
       <a href="javascript:;"><img class="sharerImg" src="//m.sbmmt.com/static/images/images/icon52.png" data-id="2"></a>
       <span class="sharerSpan">0</span>
      </div>
      <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 askgoodICollection" data-id="172087">
       <a href="javascript:;"><img class="sharerImg " src="//m.sbmmt.com/static/images/images/icon37.png" data-id="5"></a>
       <span class="sharerSpan">0</span>
      </div>
     </div>
     <div id="commentinput" class="info detail-comment-input layui-hide-sm">
      <div class="detail-ci-avator">
       <img src="//m.sbmmt.com/static/images/user_avatar.jpg" alt="P粉232793765">
       <div class="detail-r">
        <span class="detail-name">P粉232793765</span>
        <p class="detail-signal"></p>
       </div>
      </div>
      <div id="js-reply-wrap">
       <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div>
       <div class="qa-ci-footer">
        <div class="qa-ci-footright">
         <button id="js-wenda-ci-submit" class="detail-btn" data-qid="172087">reply</button>
        </div>
       </div>
      </div>
     </div>
     <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content">
      <div class="arTop flexRow">
       <div class="artLeft flexRow fontBold fontColor1">
        reply all
        <b class="artlb colorGrey">(1)</b>
       </div>
       <button class="artBtn ask-comment-answer gbaskcommentanswer">I'll reply</button>
       <button class="artBtn ask-comment-answer gbaskcomment">Close</button>
      </div>
      <div class="allReplayLine"></div>
      <div class="wdsyConDiv flexRow ask_top_ul">
       <img src="//m.sbmmt.com/static/images/user_avatar.jpg" alt="P粉106301763" class="wdcdImg">
       <div class="wdcdContent flexColumn">
        <div class="wdcdContentReply">
         <div class="wdxqrcTop flexRow">
          <a href="//m.sbmmt.com/member/1271870.html" target="_blank" class="wdcdcName">P粉106301763<b class="wdxqRcT colorGrey">2023-09-09 00:13:05</b></a>
          <span class="wdxqrcTopspan colorGrey">1 floor</span>
         </div>
         <div class="wdcdcCons">
          <p>React is built on the assumption that state is immutable. You are mutating an existing array, not creating a new one, so after setting the state, React compares the before and after states, finds that they are the same array, and therefore thinks nothing has changed. So it won't re-render.</p>
          <p>Instead, create a copy of the array and modify it:</p>
          <pre class="brush:php;toolbar:false;">const handleArrayChanges = ({ target: { name, value } }) => { let newArray = [...localArray]; // <--- creating a shallow copy newArray[Number(name)] = value; setLocalArray(newArray); };</pre>
         </div>
         <div class="wdcdcInfo flexRow">
          <a href="javascript:ask_reply_good(255772)"><img class="wdxqindz" src="//m.sbmmt.com/static/images/images/icon27.png"></a>
          <span class="wdxqindzspan">Like<b>+0</b></span>
          <div class="wdcdcileft">
           <a href="javascript:;" class="wdcdciSpan reply openreply">Add Reply</a>
           <a href="javascript:;" class="wdcdciSpan reply closereply" style="display:none">关闭回复</a>
          </div>
         </div>
         <div class="wdcdContentReplyss" style="display: none;">
          <div class="reply textarea-con">
           <div class="replyTop flexRow">
            <div class="retLeft flexRow">
             <img src="//m.sbmmt.com/static/images/user_avatar.jpg" class="retlAvatar">
             <span class="retlName">P粉232793765</span>
            </div>
           </div>
           <textarea class="replaytext colorGrey" id="release-reply" placeholder="Write down your reply">
           reply