Mantine accordion specifies that its content should be only of type Accordion.Item (or, AccordionItem) - see the documentation for the children props. This means that even functions that actually return AccordionItem will not be listed.

So, this simple component will display only AccordionItem(s) that were instantiated inline, yet, not one returned from another function (see MyAccordionItem in this simple app).

The code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Accordion } from '@mantine/core';

const MyAccordionItem = ({children, label}) =>
  <Accordion.Item label={label}>
    {children}
  </Accordion.Item>;

function App() {
  return (
    <div style={{width: 200}}>
      <div>pre</div>
      <Accordion>
        <Accordion.Item label="section0">
          <div>sec0.item1</div>
          <div>sec0.item2</div>
          <div>sec0.item3</div>
        </Accordion.Item>


        {/* Section 1 is not displayed because it is no of type Accordion.Item 
        <MyAccordionItem label="section 1">
          <div>sec1.item1</div>
          <div>sec1.item2</div>
          <div>sec1.item3</div>
        </MyAccordionItem>

        <Accordion.Item label="section2">
          <div>sec2.item1</div>
          <div>sec2.item2</div>
          <div>sec2.item3</div>
        </Accordion.Item>
      </Accordion>
      <div>post</div>
    </div>
  );
}

render(<App />, document.getElementById('root'));

The reason is the filter function defined here, and used by the accordion here.

My questions are:

1. Do you know of any work around that helps assigning the same type (or, appearing to be an Accordion.Item when defining your own component?
2. On a larger scale, What do you think is the right approach from the library's perspective (in this case mantine), i.e. should it suffice in checking that the returned type is An accordion item?