Bug: Component's name that's a prefix of another can't be nested

[desiprisg]

Noticed this while implementing an <Accordion />. I've added overrides for <Accordion /> and <AccordionItem /> and it seems that when nesting these, the outside element is not placed correctly.

Simplified example:

overrides: {
     Accordion: ({ children }) => children,
     AccordionItem: ({ children }) => children,
}

will yield:

If Accordion was not a prefix of AccordionItem, this would work as expected.

[alfianyusufabdullah]

Hi @desiprisg , I think you should adjust the indentation of the components you've added. Here is an example with the same case that I've already created.

[desiprisg]

@alfianyusufabdullah The issue appears when the nested component has a different name (prefixed by the first component's name). Try naming the second one CalloutSubmission2.