state updates with the old and the new values at the same time

been trying to update initUsers values on the DOM so the initial state values it works just fine but when i update initUsers it renders different values from the expected ones .

so basically entriesNum get a number as an event and based on it changes the order of initUsers state value from something like this :

enter image j here

to this :

enter image description here

`  const [itteratedUsers, setItteratedUsers] = useState([...users]);
  const [Newobj, setNewobj] = useState([]);
  const [isNewObj, setIsNewObj] = useState(false);
  const [initUsers, setUsers] = useState(users);`

`  const entriesNum = (event) => {
    
 
    const newi = Math.ceil(5 / event.target.value);

     for (let i = 0; i < newi; i++) {
      if (itteratedUsers.length >= event.target.value) {
        Newobj.push(
          itteratedUsers.splice(0, event.target.value).reduce((obj, key, i) => {
            obj[i] = key;
            return obj;
          }, {})
        );
      } else {
        Newobj.push(
          itteratedUsers.splice(0).reduce((obj, key, i) => {
            obj[i] = key;
            return obj;
          }, {})
        );
      }
    }
     
setNewobj([]);
    setIsNewObj(true);
    setUsers(Newobj);
    
    setItteratedUsers(users);

    
  };`

because i have two forms of initUsers i hade to set two ways of destructuring like this :

`*{isNewObj
                ?  initUsers.map((objUser ) => (
                    < >
                      {Object.keys(objUser).map((numo) => (
                        <div
                          key={numo}
                          className="contacts-info  border-solid border-2 border-black table-row w-full "
                        >
                          <input type={"checkbox"} className={`${shortcut}`} />
                          <div className={`${shortcut}`}>
                            {objUser[numo].index}
                          </div>
                          <div className={`${shortcut}`}>
                            {objUser[numo].email}
                          </div>
                          <div className={`${shortcut}`}>
                            {objUser[numo].access}
                          </div>
                        </div>
                      ))}
                    </ >
                  )) :
                
                initUsers.map(({ index, handle, phone, email, access }) => (
                    <div
                      key={id}
                      className="contacts-info  border-solid border-2 border-black table-row w-full "
                    >
                      <input type={"checkbox"} className={`${shortcut}`} />
                      <div className={`${shortcut}`}>{index}</div>
                      <div className={`${shortcut}`}>{handle}</div>
                      <div className={`${shortcut}`}>{phone}</div>
                      <div className={`${shortcut}`}>{email}</div>
                      <div className={`${shortcut}`}>{access}</div>
                    </div>
                  ))}*`

the second condition destructur the initUsers when it is not nested and shows the following result :

enter image description here

and the first one destructure it in its nested form and shows the following result :

enter image description here

so instead of getting 5 rows the result of destructuring the nested initUsers i get 9 .