Удален массив firebase, добавляемый автоматически

Question

Я создаю коктейльное приложение, в котором пользователи могут сохранять, удалять рецепты. Сохранение в порядке, удаление, у меня возникли проблемы. Проблема заключается в том, что когда я удаляю объект, который хочу использовать с помощью arrayRemove () в хранилище, удаленный объект снова добавляется после удаления в течение секунды. Но иногда объект удаляется навсегда. Как вы можете себе представить, я хочу снять эту проблему и убедиться, что объект, который я удалил из массива, останется удаленным. Код из компонента, который извлекает содержимое и удаляет содержимое, выглядит следующим образом. Кто-нибудь может понять, почему это так?

import React, { useContext, useState, useEffect } from 'react';
import { Col, Row, Container } from 'react-bootstrap';
import NavBar from '../NavBar/NavBar';
import Footer from '../Footer/Footer';
import './SavedCocktailInstructions.css';
import { Link } from 'react-router-dom';
import { CocktailContext } from '../../context/CocktailContext';
import fire from '../../Config/firebase';
import { db } from '../../Config/firebase';
import firebase from 'firebase/app';

export default function SavedCocktailInstructions(props) {
    const [ cocktailInformation, setCocktailInformation ] = useState('');
    const nameOfDrink = props.match.params.name;
    const { uid } = useContext(CocktailContext);

    useEffect(() => {
        onAuthStateChange();
    }, []);

    function onAuthStateChange() {
        return fire.auth().onAuthStateChanged((user) => {
            if (user) {
                let userId = user.uid;
                fetchSavedData(userId);
            } else {
            }
        });
    }

    const fetchSavedData = (uid) => {
        db.collection('users').doc(uid).onSnapshot(function(doc) {
            let recipes = doc.data();
            const chosenCocktail = recipes.array.find((recipe) => recipe.strDrink === nameOfDrink);
            setCocktailInformation(chosenCocktail);
        });
    };

    const {
        strIngredient1,
        strIngredient2,
        strIngredient3,
        strIngredient4,
        strIngredient5,
        strIngredient6,
        strIngredient7,
        strIngredient8,
        strIngredient9,
        strIngredient10,
        strMeasure1,
        strMeasure2,
        strMeasure3,
        strMeasure4,
        strMeasure5,
        strMeasure6,
        strMeasure7,
        strMeasure8,
        strMeasure9,
        strMeasure10,
        strDrinkThumb
    } = cocktailInformation;

    const remove = () => {
        db.collection('users').doc(uid).update({
            array: firebase.firestore.FieldValue.arrayRemove(cocktailInformation)
        });
    };
    return (
        <div>
            <NavBar />
            <Container fluid className="SavedCocktailInstructions">
                <Row>
                    <Col xs={12} sm={6} md={6} className="SavedCocktailInstructions-image">
                        <img src={strDrinkThumb} alt="" className="SavedCocktailInstructions-image img-fluid" />
                    </Col>

                    <Col xs={12} sm={6} md={6} className="SavedCocktailInstructions-text">
                        <h1 className="font-style-1 ">{nameOfDrink}</h1>
                        <p>{`Served in a ${cocktailInformation.strGlass}`}</p>
                        <ul className="SavedCocktailInstructions-ul">
                            {strIngredient1 === null ? '' : <li>{`${strIngredient1}-${strMeasure1}`}</li>}
                            {strIngredient2 === null ? '' : <li>{`${strIngredient2}-${strMeasure2}`}</li>}
                            {strIngredient3 === null ? '' : <li>{`${strIngredient3}-${strMeasure3}`}</li>}
                            {strIngredient4 === null ? '' : <li>{`${strIngredient4}-${strMeasure4}`}</li>}
                            {strIngredient5 === null ? '' : <li>{`${strIngredient5}-${strMeasure5}`}</li>}
                            {strIngredient6 === null ? '' : <li>{`${strIngredient6}-${strMeasure6}`}</li>}
                            {strIngredient7 === null ? '' : <li>{`${strIngredient7}-${strMeasure7}`}</li>}
                            {strIngredient8 === null ? '' : <li>{`${strIngredient8}-${strMeasure8}`}</li>}
                            {strIngredient9 === null ? '' : <li>{`${strIngredient9}-${strMeasure9}`}</li>}
                            {strIngredient10 === null ? '' : <li>{`${strIngredient10}-${strMeasure10}`}</li>}
                        </ul>
                        <p>{cocktailInformation.strInstructions}</p>

                        <Link
                            onClick={() => remove(uid)}
                            exact
                            to="/saved"
                            className="SavedCocktailInstructions-remove-button"
                        >
                            Remove from saved?
                        </Link>
                    </Col>
                </Row>
            </Container>
            <Footer />
        </div>
    );
}