How To render properly a component in react useEffect and firebase - reactjs

Question

I am trying to get instantly data from my Firebase with onSnapshot and it is working.
But the input field got the same amount of data in the Firebase as [object object],[object object] if I have two data in the Firestore. If I want to add data then when I click on the input field, the page becomes white.
I can't add new data this way.
Any help, please?
codesandbox.io ==> https://codesandbox.io/s/long-bush-sjkjnq?file=/src/Body/AppBody.jsx
function AppBody() {
const [reservation, setReservation] = useState([]);
useEffect(()=>{
db.collection('reservations')
.orderBy('timestamp', 'asc')
.onSnapshot(snapshot =>(
setReservation(snapshot.docs.map(doc =>({
id: doc.id,
data: doc.data()
})))
))
},[])
const handleClick = ()=>{
if(!reservation){
return;
}
db.collection('reservations').add({
title: reservation,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
})
setReservation("");
}
return (
<div className="appBody" >
<div className="appBody__left">
<h3>Reservations: </h3>
<div className="reservationCard">
{reservation.map(({id, data: {title}}) =>{
return <ReservationCardItem
key={id}
id={id}
title={title}
Icon={CloseIcon} />
})}
</div>
<div className="reservationInput">
<input type="text" placeholder="reservation name" value={reservation}
onChange={(e)=>setReservation(e.target.value)} />
<button onClick={handleClick} >Add</button>
</div>
</div>
<div className="vertical__line"></div>
<div className="appBody__right">
<h3>Menus: </h3>
<div className="menu__card">
<div className="menuCard__person">
<h4>Selena gomez</h4>
<CloseIcon />
</div>
<div className="menucard__menu">
<ReservationCardItem title="Selena" Icon={CloseIcon} />
<ReservationCardItem title="Selena" Icon={CloseIcon} />
</div>
<div className="menuCard__input">
<input type="text" placeholder="add Menu item" />
<button>Add</button>
</div>
</div>
</div>
</div>
)
}
export default AppBody

Answer 1

I created another piece of state (like a copy), so that I didn't use the initial state directly. And it worked.
I don't know if it was the better solution, but it worked fine :)