Just trying to set up a simple Modal component class to use on a button on my header. You click the button and it calls this component and pulls up a Modal popup. Only issue is my Modal.Header is erroring out with TS2739 Error. Here is my code for the component class:

import { Modal, Button } from 'react-bootstrap';
import styles from 'style.module.scss';

interface WalletModalProps {
    show: boolean;
    handleClose: () => void;
}

const WalletModal = ({ show, handleClose }: WalletModalProps) => {
    return (
        <Modal show={show} onHide={handleClose} centered>
            <Modal.Header closeButton>
                <Modal.Title className={styles.walletModalTitle}>Let's add a new wallet</Modal.Title>
            </Modal.Header>
        </Modal>
    );
};

export default WalletModal;

I removed the body and the footer from the code as the issue is the header.

TS2739: Type '{ children: Element; closeButton: true; }' is missing the following properties from type 'Pick<ModalHeaderProps, "bsPrefix" | "className" | "role" | "children" | "style" | "onHide" | 
"slot" | "title" | "suppressHydrationWarning" | "color" | "id" | ... 247 more ... | "closeButton">': placeholder, onPointerEnterCapture, onPointerLeaveCapture

I’ve already updated my types and bootstrap react, so I don’t think that’s the issue. The following is the exact error. I also tried moving onHide={handleClose} into the header after closeButton, but that didn’t change anything.