Typescript error in react - Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>'

Question

In App.tsx, if you hover the <Accordion/>, you will see the error below.

'Accordion' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2786)

How can I fix this problem?

App.tsx

import "./styles.css";

import Accordion from "./Accordion";

export default function App() {
  const items = [
    { id: 1, title: "title 1", description: "description 1" },
    { id: 2, title: "title 2", description: "description 2" }
  ];
  return (
    <div className="App">
      <Accordion items={items} />
    </div>
  );
}

Accordion.tsx

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Box
} from "@chakra-ui/react";

type AccordionProps = {
  items: Array<{ id: number; title: string; description: string }>;
};

export default function AccordionList({ items }: AccordionProps) {
  return items.map((item) => {
    return (
      <Accordion defaultIndex={[0]} allowMultiple>
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      </Accordion>
    );
  });
}

Codesandbox
https://codesandbox.io/s/determined-ives-lob9x?file=/src/Accordion.tsx:0-734

Answer 1

You should map items inside the Accordion like this

export default function AccordionList({ items }: AccordionProps) {
  return (
    <Accordion defaultIndex={[0]} allowMultiple>
      {items.map((item) => (
        <AccordionItem>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              {item.title}
            </Box>
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>{item.description}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

Sandbox https://codesandbox.io/s/patient-bush-167ye?file=/src/Accordion.tsx:250-727