React + Firestore - Увеличивает значение на +1

Question

Я пытаюсь обновить значение clapCount на +1 в моем пожарном депо при каждом нажатии кнопки хлопка. Я испробовал довольно много практик, но я просто не могу понять это правильно.

Я подозреваю, что моя проблема где-то в этой части

function onUpdate (id) {
    const db = firebase.firestore()
    db.collection('wishes').doc(id).set(wish.clapCount + 1)
}

И затем я ссылаюсь на эту функцию на Кликните внутри кнопки хлопать.

<Button 
    type="submit" 
    variant="outlined" 
    onClick={() => onUpdate(wish.clapCount)}> 
    <span className="emoji">??</span>&nbsp;
    <span>{wish.clapCount}</span>
</Button>

* 1009 см. мой скриншот структуры пожарного депо. нажмите здесь

Полный код файла можно найти ниже:

import React, { useState, useEffect, Component } from 'react';
import firebase from '../../firebase.js';
import Loading from "../../components/Loading";
import { useAuth0 } from "../../react-auth0-spa";

import FadeIn from "react-fade-in";
import Placeholder from '../Placeholder/Placeholder.js';
import ClapButton from '../ClapButton/ClapButton.js'

// MUI
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';


function useWishes() {
    const [wish, setWish] = useState([])

    useEffect(() => {
        firebase
            .firestore()
            .collection('wishes')
            .onSnapshot((snapshot) => {
                const newWish = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
            }))

            setWish(newWish)
            })
     }, [])

    return wish;
}

function onDelete (id) {
    const db = firebase.firestore()
    db.collection('wishes').doc(id).delete()
}

const WishList = () => {
    const wish = useWishes()
    const { user } = useAuth0();
    const { loading } = useAuth0();

    const [clapCount, setClapCount] = useState('')

    function onUpdate (id) {
        const db = firebase.firestore()
        db.collection('wishes').doc(id).set(wish.clapCount + 1)
    }

    if (loading) {
      return <Loading />;
    }

    return (
        <div>
            <div className="list">
            {wish.map((wish) =>
                <Paper className="wish" key={wish.id}>
                <FadeIn>
                <h2>{wish.wish}</h2>
                <div className="name">
                    <p>poslal <span className="currentName">{wish.username}</span></p>
                    {wish.username === user.name || wish.email === user.email ?
                    <button onClick={() => onDelete(wish.id)}>Remove Item</button> : null}
                    <div>
                    <div class="counter">
                        <Button 
                        type="submit" 
                        variant="outlined" 
                        onClick={() => onUpdate(wish.clapCount)}> 
                        <span className="emoji">??</span>&nbsp;
                        <span>{wish.clapCount}</span>
                        </Button>
                    </div>
                    </div>
                </div>
                </FadeIn>
                </Paper>
            )}
            </div>
        </div>       
    )
}

export default WishList