Идентичные документы пожарной части, создаваемые при добавлении

Question

У меня есть простой контекстный API-интерфейс, по которому я отправляю данные в Firestore. Код контекста ниже

import React, { useState, createContext } from 'react';
import firebase from '../Database/firebase';

export const CocktailContext = createContext();

export default function CocktailContextProvider(props) {
    const [ Data, setData ] = useState({});

    const addData = (Title, Author) => {
        setData({ Title, Author });
    };

    firebase.firestore().collection('doggo').add(Data);
    return (
        <div>
            <CocktailContext.Provider value={{ Data, addData }}>{props.children}</CocktailContext.Provider>
        </div>
    );
}

эти значения отправляются в контекст с помощью формы ниже

   import React, { useState, useContext } from 'react';
import { CocktailContext } from '../../Context/CocktailContext';

export default function Form() {
    const [ Title, setTitle ] = useState('');
    const [ Author, setAuthor ] = useState('');

    const { addData } = useContext(CocktailContext);

    const sendData = (e) => {
        e.preventDefault();
        addData(Title, Author);
        setAuthor('');
        setTitle('');
    };

    return (
        <div>
            <form>
                <input type="text" value={Title} onChange={(e) => setTitle(e.target.value)} />
                <input type="text" value={Author} onChange={(e) => setAuthor(e.target.value)} />
            </form>
            <button onClick={sendData}>Add Data</button>
        </div>
    );
}

проблема в том, что когда я go на пожарном депо, я вижу запись, которую я только что создал, появляется три раза. Может кто-нибудь сказать мне, что может быть причиной этого? : /