typescript - Typescript で react-multi-carousel を使用した React Carousel スクロールバーの問題

Question

以下のデモのように、react-multi-carousel パッケージを使用して水平スクロールバーを作成しようとしています。

コードサンドボックス

私の問題は、これを typescript で実装しようとすることです。開発者から提供されたタイプスクリプトの使用法ファイルを調べましたが、簡単なセットアップを行うだけでまだエラーが発生しています。

const Overview = (props) => {
const classes = useStyles();

const CustomDots = ({ index, active, onClick, carouselState }:DotProps) => {
    return <div onClick={() => onClick }>This is a Custom dots</div>
  }
return (
    <Card className={classes.root}>
        <CardHeader className={classes.cardHeader} title="Overview" subheader="All Users(11)" />
        <CardContent className={classes.cardContent}>
            
            <Carousel           
                containerClass={classes.carouselContainer}
                responsive={responsive} 
                customDot={<CustomDots/>}           
            >
                <UserCard />
                <UserCard />
                <UserCard />
                <UserCard />


            </Carousel>
        </CardContent>
    </Card>
);

};

prop customDot には、「この呼び出しに一致するオーバーロードはありません」というエラーがあります。typescript で水平スクロールバーを動作させるためのヘルプは大歓迎です!