close all react accordions on click event

I am using some react accordions in some programatically generated menus. I want all of them to close when a user has selected a button inside of one. is there a flag or something I can switch to close all accordions in a page. The reason i want accordions and not dropdowns is because they looked better on mobile devices and didn't overlay the other menu items.

here is my code that creates them.

    function createNavigation(items) {


  return items.map((item) => {
    if (item.blockNavigation) {
      return;
    }
    if (item.children) {
      return (
        <Accordion key={item.name} flush={true} show="true">
          <Accordion.Item eventKey={item.name}>
            <Accordion.Header>{item.name}</Accordion.Header>
            <Accordion.Body>
              {createNavigation(item.children)}
            </Accordion.Body>
          </Accordion.Item>
        </Accordion>
      );
    }
    else {
      return (
        <NavLink
          key={item.name}
          to={item.href}
          className={({ isActive }) =>
            classNames(
              isActive
                ? 'bg text-white'
                : 'btn-light',
              'block px-3 py-2 rounded-md text-base font-medium nav-link'
            )
          }
        data-toggle="collapse">
          {item.name}
        </NavLink>

      );
    }
  });
}

I have tried setting the open prop to false as I saw that somewhere but that did not seem to work.