react内で配列が展開できません

前提

React で配列を展開しようとしてるのですが、"型の不一致オプション"というエラーが出ます。下のコードの categories という配列を展開して、画面に表示させたいです。どのようにすればいいか教えてください。

javascript

import { Stack } from "@mui/material";import CodeIcon from '@mui/icons-material/Code';import HomeIcon from '@mui/icons-material/Home'; const categories = [ { name: 'New', icon: <HomeIcon />, }, { name: 'Coding', icon: <CodeIcon />, }, { name: 'ReactJS', icon: <CodeIcon />, }] const categories const Sidebar = () => ( <Stack > {categories.map((category) => ( <button> <span>{category.icon}</span> <span>{category.name}</span> </button> ))} </Stack>); export default Sidebar;