Vertical scroll bar in react-bootstrap Accordion Body is not clickable

Question

I am using the react-bootstrap accordion. One of my items contains a list that's sometimes rather long. I added overflowY: auto to the style in order to add a scroll bar in these cases. The scroll bar does appear, but it's not clickable (you can only scroll using the mouse wheel). Can anyone suggest to me why this might be, and what I need to do to fix it?

<div style={{ paddingTop: "1.7rem" }}>
        <table className="columnTable">
            <tbody>
                <tr>
                    {/* Other rows not shown */}
                    <td className="header">Context Information</td>
                </tr>
                <tr>
                    <td>
                        <Accordion defaultActiveKey={open.current} flush alwaysOpen>
                            {someList.filter(a => a.shouldbeIncluded == 'true').map((asset, i) => (
                                <Accordion.Item style={{ cursor: pointer, overflow: 'auto' }} eventKey={i.toString()} key={itemUri} onClick={e => HandleAccordionEvent(e, nameFromElsewhere)}>
                                    <Accordion.Header>{myPropertyName}</Accordion.Header>
                                    <Accordion.Body className="bodyText ellipses" style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, textOverflow: 'ellipsis', padding: 10 }}>
                                        {myItemList.filter(a => a.filter == "criteria").map((a, j) => (
                                            <><a href="randomUrl">{a.someRandomText}</a><br/></>
                                        ))}
                                    </Accordion.Body>
                                </Accordion.Item>
                            ))}
                        </Accordion>
                    </td>
                </tr>

                {/* Other rows */}
            </tbody>
        </table>

I have the following custom CSS defined for my component, but I don't see anything in this that would make any difference:

.accordion-button.collapsed {
  background-color: rgb(53, 132, 181) !important;
  color: white;
}

.accordion-button {
  font-size: medium;
  padding: 10px;
  background-color: rgb(0, 165, 203) !important;
  color: white !important;
}

.header {
  background-color: rgb(33, 90, 161);
  color: white;
  padding: 10px;
}

.bodyText {
  font-size: 15px;
  text-align: left;
}

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}

.columnTable {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
  position: 'absolute';
  top: 0;
  width: 200px;
  display: 'inline-block';
  padding-top: "1.7rem"
}

Answer 1

After getting help from a coworker, the problem ended up being something completely unexpected. The code I showed in my question is completely fine. The real issue was my React-bootstrap container:

<Container>
    <Row style={{ height: 10 }}>
      <Col><Image className="my-company-header-style" /></Col>
    </Row>
    <Row>
      <Col md={1}></Col>
      <Col md={10}>
        <MyComponent/>
      </Col>
      {* This line was the real problem - it was covering the scroll bar *}
      <Col md={1}></Col>
    </Row>
  </Container>

where MyComponent contains the code I showed in my original question (among other things). I had originally created three columns in my grid (two of which were empty columns that were just for spacing). In the interim, some code changes had rendered the third column unnecessary; unfortunately, it was still being rendered and was covering up the right side of my component (including my scroll bar).