MERN, how to update multiple input field from frontend in MongoDB - mongodb

Question

I am trying to update multiple fields and also want to keep data as it was previously which I don't want to edit.
I can update a single field but by manual typing not dynamically and also have no idea how to grab all other fields with which one I won't change.
I attached my code by which I can set only one field update,
const EventEdit = () => {
const [events, setEvents] = useState([]);
useEffect(() => {
const uri = `http://localhost:5000/eventss/${keyId}`;
fetch(uri)
.then((res) => res.json())
.then((data) => setEvents(data));
}, [user, keyId]);
return (
<form onSubmit={submitRegister} method="">
<div className="event_details">
<Form.Group className="mb-3" controlId="eventName">
<Form.Label>Event Name</Form.Label>
<Form.Control
type="text"
name="name"
placeholder=""
defaultValue={events?.name}
onChange={handleOnChange}
required
/>
</Form.Group>
<div className="event_type_check">
<label>
<input
type="checkbox"
defaultChecked={evTypeFilm}
onChange={() => setEvTypeFilm(!evTypeFilm)}
/>
Film Festival
</label>
<label>
<input
type="checkbox"
defaultChecked={evTypeScreen}
onChange={() => setEvTypeScreen(!evTypeScreen)}
/>
Screenwriting Contest
</label>
<label>
<input
type="checkbox"
defaultChecked={evTypeMusic}
onChange={() => setEvTypeMusic(!evTypeMusic)}
/>
Music Contest
</label>
<label>
<input
type="checkbox"
defaultChecked={evTypePhoto}
onChange={() => setEvTypePhoto(!evTypePhoto)}
/>
Photography Contest
</label>
<label>
<input
type="checkbox"
defaultChecked={evTypeOnline}
onChange={() => setEvTypeOnline(!evTypeOnline)}
/>
Online Festival / Awards Event
</label>
</div>
<Form.Group className="mb-3" controlId="runningYears">
<Form.Label>Running Years</Form.Label>
<Form.Control
type="text"
name="runningYears"
defaultValue={events?.runningYears}
placeholder=""
onChange={handleOnChange}
required
/>
</Form.Group>
<Form.Group className="mb-3" controlId="eventDescription">
<Form.Label>Event Description</Form.Label>
<textarea
type="text"
name="eventDescription"
placeholder=""
onChange={handleOnChange}
defaultValue={events?.eventDescription}
required
rows="3"
cols="88"
></textarea>
</Form.Group>
<Button type="submit">Submit</Button>
</form>
);
export default EventEdit;
backend, manual value update code.
app.put('/events/:id', async(req, res) => {
const id = req.params.id;
const query = {keyId:id}
const options = {upsert: true};
const updateDoc = { $set: { name: "Titas"} };
const result = await eventsCollection.updateOne(query, updateDoc, options);
res.json(result);
})