1npm i @react-query-firebase/firestore dayjs date-fns 
2react-day-picker uniqid
3
4npm i -D @types/dayjs @types/uniqid"
5

1const query = useFirestoreQuery(["projects"], ref,{
2subscribe:true
3});
4
5const snapshot = query.data;
6
7return snapshot.docs.map((docSnapshot) => {
8  const data = docSnapshot.data();
9  return <div key={docSnapshot.id}>{data.name}</div>;
10});

1const query = useFirestoreQueryData(["projects"], ref,{
2subscribe:true
3});
4
5return query.data.map((document) => {
6  return <div key={document.id}>{document.name}</div>;
7});

1  const id = uniqid();
2  const ProjectRef = doc(db, "projects", id);
3  const mutationProject = useFirestoreDocumentMutation(
4    ProjectRef,
5    { merge: true },
6    {
7      onMutate: async (newProject) => {
8        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
9        await queryClient.cancelQueries("projects");
10        // Snapshot the previous value
11        const previousTodos = queryClient.getQueryData("projects");
12        // Optimistically update to the new value
13        //@ts-ignore
14        queryClient.setQueryData("projects", (old) => [...old, newProject]);
15        // Return a context object with the snapshotted value
16        return { previousTodos };
17      },
18      // If the mutation fails, use the context returned from onMutate to roll back
19      onError: (err, newTodo, context) => {
20        //@ts-ignore
21        queryClient.setQueryData("projects", context.previousTodos);
22      },
23      // Always refetch after error or success:
24      onSettled: () => {
25        queryClient.invalidateQueries("projects");
26      },
27    }
28  );
29