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>