Function updateDoc() called with invalid data. Nested arrays are not supported (found in document)

I have a subcollection in my firestore and I'm trying to update the data in the modal. I noticed if I add more than one state to update, I get the "Function updateDoc() called with invalid data"...

Here's my code snippet:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { doc, updateDoc } from 'firebase/firestore';
import React, { useState } from 'react'
import { useParams } from 'react-router-dom';
import EditNoteIcon from '@mui/icons-material/EditNote';
import { db } from '../../firebase';
const EditInvngs = ({id, name, date, doctor, status}) => {
const [createDate, setCreateDate] = useState([date])
const [createName, setCreateName] = useState([name])
const [createDoctor, setCreateDoctor] = useState([doctor])
const [createStatus, setCreateStatus] = useState([status])
const {userId} = useParams();
console.log(userId)
const updateData = async (e) => {
e.preventDefault()
try {
const taskDocument = doc(db, "dentist/" + userId , "investigations", id);
await updateDoc(taskDocument, {
name: createName,
doctor: createDoctor,
date: createDate,
status: createStatus,
});
window.location.reload();
} catch (err) {
console.log(err);
}
}
return (
<>
{/* Modal Button */}
<button
type="button"
className="btn btn-primary btn-sm"
data-bs-toggle="modal"
data-bs-target={`#id${id}`}>
<EditNoteIcon/>
</button>
<div
className="modal fade"
id={`id${id}`}
tabIndex="-1"
aria-labelledby="editLabel"
aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="editLabel" style={{color:"grey"}}>
Update Investigations</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<input
type="text"
className="form-control"
placeholder="enter investigation here..."
defaultValue={createName}
onChange={(e) => setCreateName(e.target.value)}
size="3080"
/>
<input
type="date"
className="form-control"
defaultValue={createDate}
onChange={(e) => setCreateDate(e.target.value)}
/>
<input
type="text"
placeholder="Consultant doctor.."
className="form-control"
defaultValue={createDoctor}
onChange={(e) => setCreateDoctor(e.target.value)}
size="3080"
/>
<input
type="text"
placeholder="enter status here.."
className="form-control"
defaultValue={createStatus}
onChange={(e) => setCreateStatus(e.target.value)}
size="3080"
/>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button
type="button"
className="btn btn-primary"
onClick={e => updateData(e)}
>Update Investigation</button>
</div>
</div>
</div>
</div>
</>
)
}
export default EditInvngs

<!-- end snippet -->

When I tried to use only one state in the updateDoc, for instance, using only "name" as an update it works perfectly but the moment I add more than one state it throws the error..

Here's what I mean...

  const updateData = async (e) => {
e.preventDefault()
try {
const taskDocument = doc(db, "dentist/" + userId , "investigations", id);
await updateDoc(taskDocument, {
name: createName,
});
window.location.reload();
} catch (err) {
console.log(err);
}
}

useState() with braces [ ] will return array values, and firestore does not have nested arrays as primitive types. Hence removing [ ] will solve the problem. So modify your snippet as below

const [createDate, setCreateDate] = useState(date);
const [createName, setCreateName] = useState(name);
const [createDoctor, setCreateDoctor] = useState(doctor);
const [createStatus, setCreateStatus] = useState(status);

Reference: https://react.dev/reference/react/useState#usestate