ReactFire Use useFirestore after useUser (auth)

Question

Im trying to clone an ecommerce. I want to add a car section for products. I use Firebase (reactfire) to authentication. When I add a product to car, firebase create a Collection with the emair from auth user

something like

emailUser > product > json

I need to show that Json in my car component but when i use fetchData, the component paint nothing. Im triying to use Useefect to fetchData when the component is rendered.

Here is my code:

import React, { useEffect, useState } from "react";
import { useUser, useFirestore } from "reactfire";
import { useHistory } from "react-router-dom";
import { db } from "../../firebaseProyect";

const Car = () => {
  const history = useHistory();
  const { data: user } = useUser();
  const [cards, setCards] = useState([]);


  const fetchData = async (cUser) => {
    const data = await db.collection(cUser.email).get();
    setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    console.log(cards);
  };

  useEffect(() => {
    if (!user) {
      history.replace("/");
    } else {
        fetchData(user);
    }
  }, []);

  const deleteCar = async () => {
    return;
  };

  return(<div>
      {cards.map((product) => {
          return(
              <p>{product.title}</p>
          )
      })}
  </div>);
};

export default Car;