Antd simple headless collapse without the header

_example.tsx

import { HeadlessCollapse } from "./HeadlessCollapse";

export const Example = () => {
  const [expand, setExpand] = useState(false);
  return (
    <>
      <HeadlessCollapse expanded={expand}>
        <p>This is some text!
        <button onClick={() => setExpand(false)}>Close</button>
      </HeadlessCollapse>
      <p>Press this button to open a collapse:</p>
      <button onClick={() => setExpand(t => !t)}>Toggle</button>
    </>
  )
}

HeadlessCollapse.tsx

import { Collapse } from "antd";
import React, { FC, PropsWithChildren } from "react";
import styles from "./styles.module.scss";

interface Props {
  expanded: boolean;
}
export const HeadlessCollapse: FC<PropsWithChildren<Props>> = ({
  expanded,
  children,
}) => {
  return (
    <Collapse
      activeKey={expanded ? ["1"] : []}
      bordered={false}
      className={styles.collapse}
    >
      <Collapse.Panel header="" key="1">
        {children}
      </Collapse.Panel>
    </Collapse>
  );
};

styles.module.scss

.collapse {
  transition: background 0.3s ease-in-out;
  border-radius: 5px;
  padding: 8px;
  margin: 0 -8px;
}