Next.js and Material UI

میخوام BottomNavigationAction از Material UI رو در Next.js لینک کنم اما Next.js Link با این کامپوننت متریال سازگار نیست چون BottomNavigationAction باید مستقم فرزند BottomNavigation باشه. روش های مختلف رو استفاده کردم از جمله روشی که در کد زیر هست اما جواب نداد. stackoverflow رو هم گشتم ولی هیچی در این مورد پیدا نکردم. ممنون میشم راهنمایی کنید.
@hesammousavi

 <Box sx={{width: 500}}>
            <BottomNavigation
                showLabels
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}>
                <Link href="/movies">
                <BottomNavigationAction value="/movies" label="Movie" icon={<TheatersIcon/>}/>
                </Link>
                <BottomNavigationAction value="/musics" label="*****" icon={<MusicVideoIcon/>}/>
                <BottomNavigationAction value="/books" label="Book" icon={<BookIcon/>}/>
                <BottomNavigationAction value="/mag" label="Mag" icon={<WidgetsIcon/>}/>
            </BottomNavigation>