This is not the first time I've encountered an issue almost exactly like this, wherein I have a react-bootstrap <Button> inside of a react-bootstrap <Col> inside of a `' and that button will simply not be clickable. Earlier, I was able to circumvent this by removing the from the it was in, into something less nested, but this time that does not seem to be a viable option. My code looks as follows...

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

Where right now, handleSendMessage() just has a console.log("Hit send") inside of it. When I hover over the button, it has the finger pointer, yet when I click there is no shading / opacity animation like there usually is, and no console.log statement. Does anyone have any ideas how to correct this?