How to use the styled-react-modal.default function in styled-react-modal

// COMPONENTS
import { ModalHeader, StyledHeader } from './Header';
import { ModalContent, StyledContent } from './Content';
import { ModalFooter, StyledFooter } from './Footer';
import { ModalClose } from './Close';

export type ModalSize = 'lg' | 'sm';

const Sizes = {
    lg: { width: 50, contentPadding: 2.5, footerHeight: 6.5 },
    sm: { width: 25, contentPadding: 2, footerHeight: 5.5 },
};

const defaultSize: ModalSize = 'lg';

const StyledModal = StyledReactModal.default.styled`
    position: relative;
    width: ${({ width, size = defaultSize }: ModalProps) =>
        width || `${Sizes[size].width}rem`};
    height: ${({ height = '42.375rem' }: ModalProps) => height};
    margin: ${({ margin = 'auto' }: ModalProps) => margin};

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    ${({ background = 'white', color }: ModalProps) =>
        css({
            background: th.color(background),
            color,
            borderRadius: 'modal',