Esta no es la primera vez que encuentro un problema casi exactamente como este, en el que tengo un <Button> de arranque de reacción dentro de un <Col> de arranque de reacción dentro de un `' y simplemente no se puede hacer clic en ese botón. Anteriormente, pude eludir esto eliminando el de donde estaba, en algo menos anidado, pero esta vez no parece ser una opción viable. Mi código se ve de la siguiente manera...

 <div style={{borderColor: "grey", borderWidth: .5, border: 'solid'}}> <Row> <Col sm={10}> <input type='text' onChange={(event) => handleTextChange(event.target.value)} value={typedMessage} style={{width: '100%', height: '100%'}}/> </Col> <Col sm={2}> <Button style={{width: '100%', marginLeft: 0}} onClick={() => handleSendMessage()}> Send </Button> </Col> </Row> </div>

Donde en este momento, handleSendMessage() solo tiene un console.log("Hit send") dentro de él. Cuando paso el mouse sobre el botón, tiene el puntero del dedo, sin embargo, cuando hago clic, no hay una animación de sombreado / opacidad como suele haber, y no hay una declaración de console.log. ¿Alguien tiene alguna idea de cómo corregir esto?