how to use compound pattern with dynamic imports nextjs - reactjs

Question

so i was trying to use dynamic imports in nextjs to import a component that uses compound pattern design(Dialog); but i get the following error while trying to use properties of Dialog:
TS2339: Property 'Title' does not exist on type 'ComponentType<{}>'.
  Property 'Title' does not exist on type 'ComponentClass<{}, any>'.
following is the Dialog component implementation that uses compound pattern:
const Dialog = ({children}) => (
<>
<NativeDialog
open={true}
PaperProps={{
sx: {
width: "700px",
borderRadius: "15px",
"#media only screen and (max-width: 720px)": {
width: "100vw",
height: "100vh",
},
},
}}
>
{children}
</NativeDialog>
</>
);
const DialogHeader = () => (
<div className={styles.headerContainer}>
<div style={{marginRight: "37%"}}>
<IconButton>
<Link href="/" passHref>
<CloseIcon/>
</Link>
</IconButton>
</div>
<div>
<TwitterLogo size="S"/>
</div>
</div>
);
const DialogTitle = ({children}) => (
<NativeDialogTitle>
<div className={styles.titleContainer}>{children}</div>
</NativeDialogTitle>
);
const DialogContent = ({children}) => (
<NativeDialogContent>
<div className={styles.formContainer}>{children}</div>
</NativeDialogContent>
);
const DialogActions = ({children}) => (
<NativeDialogActions>
<div className={styles.actionContainer}>{children}</div>
</NativeDialogActions>
);
Dialog.Header = DialogHeader;
Dialog.Title = DialogTitle;
Dialog.Content = DialogContent;
Dialog.Actions = DialogActions;
export default Dialog;
and here is the component that dynamically imports Dialog:
const Dialog = dynamic(
() => import('../../Dialog'),
{loading: () => <Spinner/>}
)
const Signin = ({signinState, setSigninState, handleSignin, setAuth}) =>
(
<>
<Dialog>
<Dialog.Title>
<Dialog.Header/>
<div className={`font font-eb ${styles.header}`}>
Sign in to Twitter
</div>
</Dialog.Title>
<Dialog.Content>
<div className={styles.contentContainer}>
<div className={styles.contentItem}>
<Button className={buttonStyles.whiteButton}>
<ThirdPartyAuth state="in" company="Google"/>
</Button>
</div>
<div className={styles.contentItem}>
<Button className={buttonStyles.whiteButton}>
<ThirdPartyAuth state="in" company="Apple"/>
</Button>
</div>
<div className={styles.contentItem}>
<Divider orientation="horizontal" text="or" width={300}/>
</div>
<div className={styles.contentItem}>
<TextField
sx={{width: 300}}
label={<div className="font">email</div>}
value={signinState.email}
onChange={e => setSigninState(prevState => {
return {...prevState, email: e.target.value}
})}
/>
</div>
<div className={styles.contentItem}>
<TextField
sx={{width: 300}}
label={<div className="font">password</div>}
value={signinState.password}
onChange={e => setSigninState(prevState => {
return {...prevState, password: e.target.value}
})}
/>
</div>
{(signinState.clientError || signinState.serverError) && <div className={styles.contentItem}>
<div className={styles.error + " font font-m"}>
{signinState.clientError ? signinState.clientError : signinState.serverError ? signinState.serverError : ""}
</div>
</div>}
<div className={styles.contentItem}
onClick={() => handleSignin(signinState, setSigninState, setAuth)}>
<Button
className={`
${buttonStyles.blackButton} font font-eb`}
>
Signin
</Button>
</div>
<div className={styles.contentItem}>
<Button
className={`
${buttonStyles.whiteButton} font font-b`}
>
Forgot password?
</Button>
</div>
<div
className={`${
styles.contentItem + " " + styles.help
} font font-m`}
>
Don&apos;t have an account?
<div style={{display: "inline-block"}}>
<Link href="/signup" passHref>
<div className={styles.signup}>Sign up</div>
</Link>
</div>
</div>
</div>
</Dialog.Content>
</Dialog>
</>
);
export default Signin;
using Dialog with regular import expression doesnt create this problem but dynamically importing it does. any thoughts is appreciated.