Вертикальная полоса прокрутки в React-Bootstrap Accordion Body не кликабельна

Я использую аккордеон React-Bootstrap. Один из моих материалов содержит список, который иногда бывает довольно длинным. Я добавил overflowY: auto к стилю, чтобы в таких случаях добавить полосу прокрутки. Полоса прокрутки появляется, но на нее нельзя нажать (прокручивать можно только с помощью колеса мыши). Может ли кто-нибудь подсказать мне, почему это может быть и что мне нужно сделать, чтобы это исправить?

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

Для моего компонента определен следующий пользовательский CSS, но я не вижу в нем ничего, что имело бы какое-либо значение:

.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"
}