How do I solve this error? "Warning: Failed prop type: Prop `cancelButton` in `Confirm` conflicts with props: `children`."

Question

I am coding a webpage and right now I am on the delete function that allows the user to delete the posts that they own. All of my other functions work, so Posting, Liking, Registering, Logging In, clicking on the post to go to it, however when I press the delete button on the post, it doesnt actually delete the post, it doesnt do anything actually. It is supposed to pop up a screen for confirmation that asks you to press OK to delete, and Cancel to cancel it. But it doesnt do any of that. There are many errors and I have no clue where to fix it because none of what I am doing/what I am finding can fix this.

Here is my DeleteButton.js

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/client';
import { Button, Confirm, Icon } from 'semantic-ui-react';
import { FETCH_POSTS_QUERY } from '../util/graphql'; // Import the query used to fetch posts

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

    const [deletePost] = useMutation(DELETE_POST_MUTATION, {
        variables: { postId },
        update(proxy) {
            setConfirmOpen(false);
            // Update cache after post deletion
            const data = proxy.readQuery({
                query: FETCH_POSTS_QUERY
            });

            proxy.writeQuery({
                query: FETCH_POSTS_QUERY,
                data: {
                    getPosts: data.getPosts.filter(p => p.id !== postId)
                }
            });
        },
        onError(err) {
            console.error('Error deleting post:', err);
          }
    });

    
    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}
            </Confirm>
        </>
    );
    
}

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


export default DeleteButton;

Here is my PostCard.js:

import React, { useContext} from 'react'
import { Button, Card, Icon, Label, Image } from 'semantic-ui-react'
import { Link } from 'react-router-dom'
import moment from 'moment'

import { AuthContext } from '../context/auth'
import LikeButton from './LikeButton'
import DeleteButton from './DeleteButton'

function PostCard({ 
    post: { body, createdAt, id, username, likeCount, commentCount, likes }
}) {

    const { user } = useContext(AuthContext);


    return (
    <Card fluid>
      <Card.Content>
        <Image
          floated='right'
          size='mini'
          src='https://react.semantic-ui.com/images/avatar/large/molly.png'
        />
        <Card.Header>{username}</Card.Header>
        <Card.Meta as={Link} to={`/posts/${id}`}>
            {moment(createdAt).fromNow()}
        </Card.Meta>
        <Card.Description>{body}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <LikeButton user={user} post={{ id, likes, likeCount }}/>
        <Button labelPosition='right' as={Link} to={`/posts/${id}`}>
            <Button color='blue' basic>
                <Icon name='comments' />
            </Button>
            <Label basic color='blue' pointing='left'>
                {commentCount}
            </Label>
        </Button>
        {user && user.username === username && <DeleteButton postId={id} />}
      </Card.Content>
    </Card>
    );
}

export default PostCard

and here is my SinglePost.js:

import React, { useContext } from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/client';
import { useParams } from 'react-router-dom';
import moment from 'moment'
import { Button, Card, Grid, Image, Icon, Label } from 'semantic-ui-react'

import { AuthContext } from '../context/auth'
import LikeButton from '../components/LikeButton'
import DeleteButton from '../components/DeleteButton'


function SinglePost() {
    const { postId } = useParams();
    const { user } = useContext(AuthContext);

    const { loading, data, error } = useQuery(FETCH_POST_QUERY, {
        variables: { postId }
    });

    if (loading) return <p>Loading post...</p>;
    if (error) return <p>Error loading post!</p>;


    let postMarkup;
    if (data.getPost) {
        const { id, body, createdAt, username, comments, likes, likeCount, commentCount } = data.getPost;
        

        postMarkup = (
            <Grid>
                <Grid.Row>
                    <Grid.Column width={2}>
                    <Image
                    src='https://react.semantic-ui.com/images/avatar/large/molly.png'
                    size = "small"
                    float = "right"/>
                    </Grid.Column>
                    <Grid.Column width={10}>
                    <Card fluid>
                        <Card.Content>
                            <Card.Header>{username}</Card.Header>
                            <Card.Meta>{moment(createdAt).fromNow()}</Card.Meta>
                            <Card.Description>{body}</Card.Description>
                        </Card.Content>
                        <hr/>
                        <Card.Content extra>
                            <LikeButton user={user} post={{ id, likeCount, likes }}/>
                            <Button
                                as="div"
                                labelPosition="right"
                                onClick={() => console.log('Comment on post')}
                                >
                                    <Button basic color="purple">
                                        <Icon name ="comments"/>
                                    </Button>
                                    <Label basic color="blue" pointing="left">
                                        {commentCount}
                                    </Label>
                                </Button>
                                {user && user.username === username && (
                                    <DeleteButton postId={id} />
                                )}
                        </Card.Content>
                    </Card>
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        )
    } else {
        postMarkup = <p>Post not found</p>;
    }

    return postMarkup;
}


const FETCH_POST_QUERY = gql`
    query($postId: ID!){
        getPost(postId: $postId){
            id
            body
            createdAt
            username
            likeCount
            likes{
                username
            }
            commentCount
            comments{
                id
                username
                createdAt
                body
            }
        }
    }
`


export default SinglePost

All of these use DeleteButton in some way shape or form.

I have tried using ChatGPT 4 (which has helped me all the way through this website through every error I have encountered, except for this one...), Bard AI, Google and GitHub and stack overflow's different posts that I can find, all of these avenues have come up to no help what so ever.

Image of the console error before I even press the button (when I press the button it doesnt do anything)

In DeleteButton.js, the return function that pops up the screen that displays the message to confirm the deletion this is how I have it,

        <Confirm>
            open={confirmOpen}
            onCancel={() => setConfirmOpen(false)}
            onConfirm={deletePost}
        </Confirm>

The reason being is because when I write it like this (like how ChatGPT and the YouTube video Im following told me how to write it)

        <Confirm
            open={confirmOpen}
            onCancel={() => setConfirmOpen(false)}
            onConfirm={deletePost}
         />

I get this error on screen:

Error message when I write the Confirm differently