React functional component is not updating the state

Question

When I upload the excel file I see the array of object in my console but the table doesn't get update in UI

when I upload the second file, I see the first file uploaded.

In the code below

component is a table has the upload file functionality

here is my App.js

import React, { useState, useEffect, Component } from "react";
import Summary from './summary';
import Upload from './component/upload/upload';
import './App.css';
import Main from './component/classComp/main';

const App =() => {
 
  const [items, setItems] = useState([]);
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);
  const [helperText, setHelperText] = useState('Choose wisely')
  const [files, setFiles] = useState(items);

  useEffect(() => {
    setItems(items);
    console.log('App.js use effect')
  }, [items, files])

  const handleClick = (event, item) => {

    event.preventDefault();
    if (value === 'Add') {
     //items.forEach()
      let finalArray = items;
      finalArray.push(...item);

      console.log(finalArray, 'finalArray from   app inside')
      setItems(finalArray)
      console.log(items, 'items from app inside')
    }
  }
  console.log(items, 'items from app')
  return (
    <div className="map-container">
      <div className="left">
      <Main/>
      </div>
      <div className="left">
        <Upload items={items} setItems={setItems} handleClick={handleClick} files={files}
          setFiles={setFiles} value={value} setValue={setValue} helperText={helperText}
          error={error} setHelperText={setHelperText}
          setError={setError} />
        <Summary items={items} />

      </div>


    </div>
  );
}

export default App;

Answer 1

it wont update because you still use the same array instance

      let finalArray = items;
      finalArray.push(...item);

it is the same array but with another variable name so react wont update state didn't change you can use this

      let finalArray = [...items];
      finalArray.push(...item);

      console.log(finalArray, 'finalArray from   app inside')
      setItems(finalArray)

but I recommend to use this

setItems([...items,item])