This is my firestore with its following data. I want my code to check if the colorMap which is the color quantity then output the prodName which is the product with less than 10 color quantity.

![Firestore][1]

And this is the error that I'm getting in my code.

This is the code. I'm not sure if the .filter is actually working.

{details.filter(details => details.color < 10).map((val) => {
        return (<ul>
                <li key={val.id}><p className="pt-2">{val.prodName} </p></li>
                </ul>
        );

      })}

This is my reference for getting the data in the firebase.

  const [details, setDetails] = useState([]);

  const userData = async () => {
  
  const q = query(collection(db, "products"));

  const querySnapshot = await getDocs(q);
  const data = querySnapshot.docs.map((doc) => ({
    ...doc.data(),
    id: doc.id,
  }));
  setDetails(data);
};

If you guys know how to do this with using the if statement. Please refer it to me. Thanks.