未捕获的错误：无效的挂钩调用。如何修复此错误？

Question

我正在尝试为社交媒体应用制作 deleteButton。但是当我点击按钮时，我收到了无效的挂机呼叫。我检查了版本不匹配和钩子规则，但我找不到我的代码有什么问题。

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/react-hooks';

import { Button, Confirm, Icon } from 'semantic-ui-react';

function DeleteButton({ postId }){
    const [confirmOpen, setConfirmOpen] = useState(false);

    const [deletePost] = useMutation(DELETE_POST_MUTATION, {
        update(){
            setConfirmOpen(false);
            // TODO: remove post from cache
        },
        variables: {
            postId
        }
    });
    
    return(
        <>
            <Button as="div" 
                    color="red" 
                    floated="right" 
                    onClick={() => setConfirmOpen(true)}
                    > 
                <Icon name="trash" style={{margin: 0}}/>
            </Button>
            <Confirm 
                open={confirmOpen}
                onCancel={() => setConfirmOpen(false)}
                onConfirm={deletePost}
            />
        </>
    );
} 

const DELETE_POST_MUTATION = gql`
    mutation deletePost($postId: ID!){
        deletePost(postId: $postId)
    }
`
export default DeleteButton;