Tengo una tarjeta que tiene un botón dentro. El botón se establece visible solo cuando el usuario desplaza la tarjeta. El problema es que cuando el usuario pasa el mouse sobre la tarjeta, se muestra el botón, luego, si pasa el mouse sobre el botón, el botón desaparece porque onMouseOut of card reacciona y establece el valor booleano en falso.

 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> ) }