Cant pass array of objects to setPeople function in React - reactjs

Question

I have another file of data.js that i'm calling it in my index.js. I know I will get data if I pass it in useState directly like this below.
const [people, setPeople] = useState(data);
But I want to keep the above state null at the start rather than passing data.
const [people, setPeople] = useState([]);
But rather than accessing data this way I want to directly pass it in my setPeople. Is it possible to do that? Something like this. So that it can be accessed in people and can be iterated.
setPeople([...people,{data}])
Index.js
import React, { useState, useReducer } from 'react';
import Modal from './Modal';
import { data } from '../../../data';
// reducer function
const Index = () => {
const [name,setName]= useState('');
const [modal, showModal] = useState(false);
const [people, setPeople] = useState([]);
const handleSubmit = ((e)=>
{
e.preventDefault();
setPeople([...people,{data}])
})
return (
<div>
<form onSubmit={handleSubmit}>
<input type='text' value={name} onChange={((e)=>setName(e.target.value))} />
<button type='submit'>Add</button>
</form>
{
people.map((person,index)=>{
return(
<div key={index}>
<h2>{person.name}</h2>
</div>
)
})
}
</div>
)
};
export default Index;
data.js
export const data = [
{ id: 1, name: 'john' },
{ id: 2, name: 'peter' },
{ id: 3, name: 'susan' },
{ id: 4, name: 'anna' },
];

Answer 1

You can pass this additional data to setPeople in the same way which you pass current people - use spread syntax.
setPeople([ ...people, ...data ])
Also if you want to depend on current people state you should pass callback which always provide you correct value which sometimes can't not happen if you depend on people.
setPeople(( prevPeople ) => [ ...prevPeople, ...data ])
UPDATE
const Index = () => {
const [name,setName]= useState('');
const [modal, showModal] = useState(false);
const [people, setPeople] = useState([]);
useEffect( () => {
setState(data) // this will be added only once when component mounted
}, [])
const handleSubmit = ((e)=>{
e.preventDefault();
setPeople(( prevPeople ) => [ ...prevPeople, { id: ?, name: "Only one new person" } ])
})
return (
<div>
{ /* your jsx */ }
</div>
)
};
UPDATE 2
const handleSubmit = () => {
const peoplesIds = people.map( p => p.id )
const notIncludedData = data.filter( obj => ! peoplesIds.includes( obj.id ) )
setPeople( prev => [ ...prev, ...notIncludedData, { id: 100, name: "new guy" } ] )
}

Answer 2

You can try this at handleSubmit
setPeople([...people,...data])