const Header = ({ disableDrag, children }: { disableDrag: boolean; children?: ReactNode }) => {
  return <Sheet.Header disableDrag={disableDrag}>{children}</Sheet.Header>;
};
const Content = ({ children }: { children: ReactNode }) => {
  return <Sheet.Content>{children}</Sheet.Content>;
};
const Container = ({ children, className }: { children: ReactNode; className?: string }) => {
  return <Sheet.Container className={className}>{children}</Sheet.Container>;
};
const Scroller = ({ children }: { children: ReactNode }) => {
  return <Sheet.Scroller>{children}</Sheet.Scroller>;
};
const Backdrop = ({ onTap }: { onTap: () => void }) => {
  return <Sheet.Backdrop onTap={onTap} />;
};
const BottomSheet = ({ isOpen, onClose, detent, disableDrag, children }: BottomSheetProps) => {
  return (
    <Sheet
      className='react-modal-sheet-wrapper'
      isOpen={isOpen}
      onClose={onClose}
      detent={detent}
      disableDrag={disableDrag}
    >
      <St.SheetWrapper>{children}</St.SheetWrapper>
    </Sheet>
  );
};

export const CustomSheet = Object.assign(BottomSheet, {
  Header,
  Content,
  Container,
  Backdrop,
  Scroller,
});

const St = { ... } // 라이브러리 스타일링 커스텀 

const St = {
  SheetWrapper: styled.div`
    .react-modal-sheet-backdrop {
      ...
    }
    .react-modal-sheet-container {
      ...
    }
    .text-bottom-sheet {
      // 추가 스타일링 
      & > div:first-child {
        // 추가 스타일링 
      }
    }
    .detail-bottom-sheet {
      // 추가 스타일링 
      & > div:first-child {
        // 추가 스타일링 
      }
    }
    .react-modal-sheet-header {
      ...
    }
    .react-modal-sheet-scroller {
      ...
    }
    .react-modal-sheet-drag-indicator {
      ...
    }
  `,
};

// 사용 (className 추가) 
<CustomSheet.Container className='text-bottom-sheet'>