// Item Add Component
    const [receiptItems, setReceiptItems] = useState<
        Map<Category, ReceiptItem[]>
    >(new Map());

    const handleAdd = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        const element: Omit<ReceiptItem, 'id'> = {
            ...formInputs, //user input dialog에 의해 업데이트 됨
            category: selectedCategory.id, // db에 올라갈 주소
        };

        GroupAccountPresenter.receipts.addItem(listId, element, setReceiptItems);
    };




// GroupAccocuntPresenter
async addItem(
            listId: ListID,
            form: Omit<ReceiptItem, 'id'>,
            update: Dispatch<SetStateAction<Map<Category, ReceiptItem[]>>>,
        ) {
            database.groupAccounts.receipts.addItem(listId, form).then(data => {
                update(prevState => {
                    const target = prevState.get(data.category) || [];

                    return prevState.set(data.category, [...target, data]);
                });
            });
        },
    },






receiptItems가 배열은 아니고 Map 자료구조임

왜 똑같은게 두번 업데이트되는거냐. ...