Type unknown[] is not assignable to type React.ReactNode

import * as React from 'react';
import { List, ListItemButton, ListItemIcon, ListItemText, ListItem} from '@mui/material';
import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';


const mainListItems = () => {
    const navList = [
        { id: 1, name: 'Notes', icon: <LightbulbOutlinedIcon />},
        { id: 2, name: 'Reminders', icon:  <NotificationsNoneOutlinedIcon /> },
        { id: 3, name: 'Bin', icon: <DeleteOutlinedIcon /> },
    ]

    return (
            <List>
                {
                    navList.map( list => (
                        <ListItem key={list.id} disablePadding sx=>
                            <ListItemButton sx=>
                                <ListItemIcon sx=>
                                    {list.icon}
                                </ListItemIcon>
                                <ListItemText primary={list.name} sx=/>
                            </ListItemButton>
                        </ListItem>
                    ))
                }
            </List>
    )
}

I tried reducing the amount of code by using map to assign icon information. But it shows this error and I can't understand why it happens. Should I assign types to the attributes in the list?

line where error occurs :

navList.map( list => (

Full error message :

Type unknown[] is not assignable to type React.ReactNode ...   Type unknown[] is not assignable to type ReactElement<any, string | JSXElementConstructor> | string | number | Iterable | ReactPortal | boolean     Type unknown[] is not assignable to type boolean

from Type unknown[] is not assignable to type React.ReactNode