Populate data from firestore collection

I've written the function to retrieve data from firestore collection, when I console log the list, I can see all the documents in the "users" collection, the issue I'm facing currently is that the data is not displaying on the form which I want to update... I've set the value for all the inputs to retrieve the data, yet it's not showing on the form but I can see all the documents in the "users" collection in my console log..

Here's the code:-

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

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

const initialState = {
regNo: "",
firstName: "",
lastName: "",
email: "",
reffBy: "",
phoneNumber: "",
age: "",
date: "",
status: "",
};
const New = ({title}) => {
const [file, setFile] = useState("");
const [data, setData] = useState({});
const [userInfo, setUserInfo] = useState(initialState);
const navigate = useNavigate();
//fetch the id for each doc in a collection
const {id} = useParams();
const { regNo, firstName, lastName, email, reffBy, phoneNumber,  age, date, status}= userInfo;
// fetch ID from the collection
useEffect(() =>{
//This runs only when there's an ID
const unsub = onSnapshot(
collection(db, "users"),
(snapShot) => {
let list = [];
snapShot.docs.forEach((doc) => {
list.push({ id: doc.id, ...doc.data() });
});
setData(list);
console.log(list)
},
(error) => {
console.log(error);
}
);
return () => {
unsub();
};
}, [id]);
// For updating userInput
useEffect(()=>{
// This runs when there's an ID and Data
if (id) {
setUserInfo({...data[id]});
} else {
setUserInfo({...initialState});
}
return () =>{
setUserInfo({...initialState});
}
}, [id, data])
const handleInput = (e) => {
const {name, value} = e.target;
setUserInfo({...userInfo, [name]: value});
}
const handleAdd = async(e) => {
e.preventDefault();
await addDoc(collection(db, "users"), {
...userInfo,
timeStamp: serverTimestamp(),
});
navigate("/")
}
return (
<div className='new'>
<Sidebar/>
<div className="newContainer">
<Navbar/>
<div className="top">
<h1> {title} </h1>
</div>
<div className="bottom">
<div className="left">
<img src={file ? URL.createObjectURL(file): "https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg"} alt=''/>
</div>
<div className="right">
<form onSubmit={handleAdd}>
<div className="formInput">
<label htmlFor="file">
Image: <DriveFolderUploadIcon className="icon" />
</label>
<input
type="file"
id="file"
onChange={(e) => setFile(e.target.files[0])}
style={{ display: "none" }}
/>
</div>
<div className="formInput">
<label>ID</label>
<input 
id="regNo"
name="regNo"
type="text" 
required
placeholder="enter client id"
value={regNo || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>First Name</label>
<input 
id="firstName"
name="firstName"
type="text" 
required
placeholder="enter first name"
value={firstName || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Last Name</label>
<input 
id="lastName"
name="lastName"
type="text" 
required
placeholder="enter last name"
value={lastName || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Email</label>
<input 
id="email"
name="email"
type="email" 
required
placeholder="enter your email address"
value={email || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Refferal</label>
<input 
id="reffBy"
name="reffBy"
type="text" 
required
placeholder="enter your referral"
value={reffBy || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Phone Number</label>
<input 
id="phoneNumber"
name="phoneNumber"
type="number" 
required
placeholder="phone number"
value={phoneNumber || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Age</label>
<input 
id="age"
name="age"
type="text" 
required
placeholder="age"
value={age || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Date</label>
<input 
id="date"
name="date"
type="date" 
required
value={date || ""}
onChange={handleInput}
/>
</div>
<div className="formInput">
<label>Status</label>
<input 
id="status"
name="status"
type="text" 
required
placeholder="status"
value={status || ""}
onChange={handleInput}
/>
</div>
<button
type="submit"
>
Send
</button>
</form>
</div>
</div>
</div>
</div>
)
}

<!-- end snippet -->

Please what exactly is the issue why I'm not see the data on the form?

The code in your second useEffect() is assuming that data already has a value. But if the first useEffect()'s asynchronous action has not completed (and it almost certainly won't have) before the second useEffect runs, you'll get no data into the userInfo variable.

Your attempt to call setUserInfo() is dependent on the successful completion of the fetching of the "users" collection. So why not simply put the call to setUserInfo() INSIDE the callback function of onSnapshot() ?

BTW: I'm not sure that you need to be querying all of the "users" collection, do you? Don't you just need the ONE document for the user with the UID of id ??

Also, I am not a fan of mixing "state variables" and "regular JS variables" as being done in the line:

const { regNo, firstName, lastName, email, reffBy, phoneNumber,  age, date, status}= userInfo;

Instead, consider accessing each field with:

userInfo["regNo"]

or

userInfo.regNo