Firestore duplicating uploads in a react project

I'm running into a frustrating issue while uploading recipes to Firestore in my React application. The problem is that the data is being duplicated in the Firestore collection, and I can't seem to figure out why.

Here's how the code looks:

first the actual uploadRecipesToFirestore snippet:

export const uploadRecipesToFirestore = async (recipes) => {
    try {
      const recipesCollection = firebase.firestore().collection('recipes');
     
      const uploadPromises = recipes.map((recipe) => recipesCollection.add(recipe));
      await Promise.all(uploadPromises);
      console.log('Recipes uploaded to Firestore successfully!');
    } catch (error) {
      console.error('Error uploading recipes to Firestore:', error);
    }
  };

then the recipescontext--

import { createContext, useEffect, useState } from 'react';

import { fetchRecipesFromFirestore, uploadRecipesToFirestore } from '../utils/firebase-utils';
import PropTypes from 'prop-types';
import {recipes} from '../recipe-data'

export const RecipesContext = createContext([]);

export const RecipesProvider = ({ children }) => {
  const [isUploaded, setIsUploaded] = useState(false);
  const [fetchedRecipes, setFetchedRecipes] = useState([]);

  useEffect(() => {
    if (!isUploaded) {
      uploadRecipesToFirestore(recipes)
        .then(() => {
          console.log('Recipes uploaded to Firestore successfully!');
          setIsUploaded(true);
        })
        .catch((error) => {
          console.error('Error uploading recipes to Firestore:', error);
        });
    }
  }, [isUploaded]);

  useEffect(() => {
    const fetchRecipes = async () => {
      const recipes = await fetchRecipesFromFirestore();
      setFetchedRecipes(recipes);
    };

    fetchRecipes();
  }, []);

  return (
    <RecipesContext.Provider value={fetchedRecipes}>{children}</RecipesContext.Provider>
  );
};


RecipesProvider.propTypes = {
  children: PropTypes.node.isRequired
};

I'd really appreciate any insights or suggestions on what might be causing this duplication issue. If you need any additional information, please let me know. Thanks in advance for your help!

I guess I should mention I'm getting some vulnerabilities when installing firebase, this is the error:

rotobufjs Prototype Pollution vulnerability - https://github.com/advisories/GHSA-h755-8qp9-cq85

The fix is installing a previous version of firebase but it is labelled as a breaking change. I'm a new developer with no experience with this and I'm not sure if it's the right call. I am also not sure if that might be causing the issue or if it's at all related. My plan was to wait for a few days until maybe there was a npm audit fix that didn't trigger the breaking changes. This is also my first time using Vite instead of create-react-app, and I had to learn some new things that the create-react-app didn't demand.

This is what I've tried

1. I have a RecipesProvider component that wraps around the Home and RecipeShowcase components in my app. Inside the RecipesProvider, I use the uploadRecipesToFirestore function to upload the recipe data to Firestore.

2. I've checked for duplicate calls to the uploadRecipesToFirestore function, but there is only one occurrence in my code. So, I don't think unintentional multiple calls are the issue.

3. I also tried separating the uploading and fetching logic into two separate useEffect hooks within the RecipesProvider component. I thought this might solve the problem, but unfortunately, the data is still being duplicated.

4. I've reviewed the Firestore configuration, project settings, and Firebase project setup, but everything seems to be in order. I don't see any obvious issues there.

5. The browser console doesn't show any errors, but there is a warning about encountering duplicate keys. I believe this is only happening because the data itself is being duplicated.

This might be caused by two useEffect hooks running at the same time. To prevent duplicates, we can modify the useEffect like this:

useEffect(() => {
  uploadRecipesToFirestore(recipes)
    .then(() => {
      console.log('Recipes uploaded to Firestore successfully!');
      setIsUploaded(true);
    })
    .catch((error) => {
      console.error('Error uploading recipes to Firestore:', error);
    });
}, []);

Additionally, you mentioned a security issue with Firebase. To fix that, update Firebase to a secure version without any breaking changes before making changes to the useEffect.