The A11ySheet example seems not working

[ghost]

code:

import { useButton } from '@react-aria/button'
import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus'
import { OverlayProvider, useModal, useOverlay } from '@react-aria/overlays'
import { OverlayTriggerState } from '@react-stately/overlays'
import { styled } from 'linaria/react'
import React from 'react'
import ReactModalSheet from 'react-modal-sheet'

type Props = {
    sheetState: OverlayTriggerState
}

const Sheet = ({ sheetState, children, ...rest }: Props) => {
    return (
        <StyledSheet {...rest} isOpen={sheetState.isOpen} onClose={sheetState.close}>
            <OverlayProvider>
                <FocusScope contain autoFocus={false} restoreFocus>
                    <SheetComp sheetState={sheetState}>{children}</SheetComp>
                </FocusScope>
            </OverlayProvider>
        </StyledSheet>
    )
}

export default Sheet

const SheetComp = ({ sheetState, children }) => {
    const containerRef = React.useRef(null)
    const dialog = useDialog({}, containerRef)
    const overlay = useOverlay({ onClose: sheetState.close, isOpen: true, isDismissable: true }, containerRef)

    useModal()

    return (
        <>
            <StyledSheet.Container {...overlay.overlayProps} {...dialog.dialogProps} ref={containerRef}>
                <StyledSheet.Content>{children}</StyledSheet.Content>
            </StyledSheet.Container>
        </>
    )
}

const StyledSheet = styled(ReactModalSheet)`
    .react-modal-sheet-container {
        background-color: var(--color-background);
    }
    .react-modal-sheet-header {
        background-color: var(--color-background);
        border-bottom: 0.5px solid var(--color-border);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
    .react-modal-sheet-drag-indicator {
        background-color: var(--color-background-opacity);
    }
    .react-modal-sheet-content {
        /* custom styles */
    }
    .react-modal-sheet-backdrop {
        /* custom styles */
    }
`

Got error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SheetComp`.

[ghost]

caused by the linaria styled function (might have conflicts with motion), use css tag instead