I have a card that has a button inside it. The button is set visible only when the user hovers the card. The problem is when the user hovers the card, the button is displayed, then if hovering over the button, the button dissapears because the onMouseOut of card reacts and sets the boolean to false.

const Display = (props) => {
    const [isHoveringCard, setIsHoveringCard] = useState(false);
    const [isHoveringButton, setIsHoveringButton] = useState(false);
    const handleMouseOverCard = () => {
        setIsHoveringCard(true);
    };
    const handleMouseOutCard = () => {
        if (!isHoveringButton) {
            setIsHoveringCard(false);
        }
    };
    const handleMouseOverButton = () => {
        setIsHoveringButton(true);
    };
    const handleMouseOutButton = () => {
        setIsHoveringButton(false);
    };
    return (
        <CCard
            style={{ width: '18rem', margin: '20px' }}
            onMouseOver={handleMouseOverCard}
            onMouseOut={handleMouseOutCard}

        >
            <CCardImage
                orientation="top"
                src={props.previewimgname}
                style={{ height: '12rem' }}

            />
            {isHoveringCard &&
                <CButton
                    onMouseOver={handleMouseOverButton}
                    onMouseOut={handleMouseOutButton}
                    className='display-card-button'
                    onClick={() => {
                        props.selectDisplay()
                    }}>
                    Learn More
                </CButton>}
            <CCardBody style={{ height: '10rem' }}>
                <CCardText>
                    <CIcon icon={cilLocationPin} className="me-2" />
                    {props.address}, {props.city}, {props.zipcode}
                </CCardText>
                <CCardTitle>{props.name}</CCardTitle>
                <CCardText>
                    {props.description}
                </CCardText>
            </CCardBody>
        </CCard>
    )
}