Changing Border Radius of item in React Bootstrap Accordion

Question

I'm working on a React application with React Bootstrap, and I'm having difficulty changing the border radius for each card in my accordion. I have tried to apply the rounded-pill class to the Accordion Item, but it doesn't seem to have the desired effect. It seems like I can only change the radius of the dropdown, and not the item as a whole. Any advice would be helpful.

import Accordion from "react-bootstrap/Accordion";

function AccordionMenu({ items }) {
  return (
    <Accordion defaultActiveKey="0">
      {items.map((item, index) => (
        <Accordion.Item
          key={index}
          eventKey={index.toString()}
          className="mb-3 rounded-pill"
        >
          <Accordion.Header>{item.title}</Accordion.Header>
          <Accordion.Body>{item.content}</Accordion.Body>
        </Accordion.Item>
      ))}
    </Accordion>
  );
}

export default AccordionMenu;