How to make an icon component an object property?

In a React component I'm mapping through a list to display the category icons and their names.

<List>
    {[
        {
            name: 'Favourites',
            icon: <FavoriteBorderIcon className={classes.icon} />,
        },
        {
            name: 'Explore',
            icon: <ExploreIcon className={classes.icon} />,
        },
        {
            name: 'Watchlist',
            icon: <StarBorderPurple500Icon className={classes.icon} />,
        },
    ].map((category, index) => (
        <ListItem button key={category.name}>
            <ListItemIcon>{category.icon}</ListItemIcon>
            <ListItemText primary={category.name} />
        </ListItem>
    ))}
</List>

I want to make the code cleaner and move the array of object to a separate data file. However, I'm getting this error:

I could make the values for icons strings (this way the error disapears) but how I could display them afterwards?