section

section.tsx

const Section = ({ icon, title, content, onClickTitle }) => ...

const accordionContext = React.createContext();

const Accordion = ({ children }) => {
  const [openSections, setOpenSection] = useState([]);

  return (
    <div>
      {children}
    </div>
  )
}

Accordion.Section = (props) => {

  const styles = {
    section: css({
      marginBottom: open ? 0 : "8px",

      "&:last-child": {
        marginBottom: 0,
      }
    }),
  };

  return (
    <div className={styles.section}>
      <Section {...props} onClickTitle={() => setOpen(!open)} icon={open ? <DownCaret /> : <UpCaret />} />
    </div>
  )
}

<Accordion>
  <form>
    <div>
      <Accordion.Section>...</Accordion.Section>
      <Accordion.Section>...</Accordion.Section>
      <Accordion.Section>...</Accordion.Section>
    </div>
  </form>

  <Accordion.Section>...</Accordion.Section>
  <Accordion.Section>...</Accordion.Section>
  <Accordion.Section>...</Accordion.Section>

  <form>
    <Accordion.Section>...</Accordion.Section>
    <Accordion.Section>...</Accordion.Section>
    <Accordion.Section>...</Accordion.Section>
  </form>
</Accordion>