Accordion doesn't work when nested in custom component

I think the problem is because I am using a custom component inside the Accordion. If I add the AccordionPanel directly inside the Accordion, it works well. The custom component does nothing else than to render an AccordionPanel, but it adds a layer in between and apparently that affects the onChange.
The idea is that the navigation renders navigation items inside a menu.

// Navigation
<Accordion key={project.id}>
   <ProjectNavItem project={project} key={project.id} />
</Accordion>

// ProjectNavItem
return (
   <AccordionPanel pad="none" heading={"test"}>
      Test Me!
   </AccordionPanel>
);

Expected Behavior

The accordion panel should expand.

Actual Behavior

The accordion panel doesn’t expand. Following log appears in the console:

TypeError: onChange is not a function AccordionPanel.js:81

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

1. Use an <Accordion /> inside a <Menu />
2. Place a custom component inside the accordion. The custom component renders an <AccordionPanel />
3. Try to expand the accordion.

Your Environment

• Grommet version: 1.10.1
• Browser Name and version: Firefox 60.0b5
• Operating System and version (desktop or mobile): Desktop, Windows 10 1709 16299.309

If you need a Codepen example, I can provide it tomorrow.

[MikeWalrath]

@eluchsinger closing this issue. Please feel free to re-open if further discussion is needed.

[eluchsinger]

Sorry, I don’t know. I am not using Grommet in my current projects.