I'm building a CRUD and in the edit step I'm trying to populate the edit fields with data from the specific document.
I managed to bring the data from Firestore, but I am not able to put the data in the state, it remains empty.
Any idea how I do this?

```
import { doc, getDoc } from "firebase/firestore";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { db } from "../Firebase/firebase";

export default function EditData() {
  const [company, setCompany] = useState({});
  const params = useParams();

  useEffect(() => {
    const getData = async () => {
      const docRef = doc(db, "companies", params.id);
      const docSnap = await getDoc(docRef);
      setCompany({ ...docSnap.data() });
      console.log(docSnap.data());
      console.log(company);
    };
    getData();
  }, [params.id]);

  return (
    <div>
      Form here.
    </div>
  );
}

```

[console.log](https://i.stack.imgur.com/VGFae.png)