Dynamically create a context menu tree with submenu from static data?

Using React context-menu, I am trying todynamically create a menu tree with submenus. I'm able to render the menu successfully, but I´m not able to get submenu working (see error below code).

import React, { Component } from 'react';
import ContextMenuTrigger from 'src/ContextMenuTrigger';
import ContextMenu from 'src/ContextMenu';
import MenuItem from 'src/MenuItem';
import SubMenu from 'src/SubMenu';

const MENU_TYPE = 'SIMPLE';

const targets= [
{
    name: 'Banana', 
}, 
{
    name: 'Apple', 
    subname: [
        {
        value: 'Red Apple', 
        description: 'description for red apple'
        },
        {
        value: 'Green Apple', 
        description: 'description for green apple'
        }
    ]
},
{
    name: 'Grapes', 
},
{
    name: 'Orange', 
    subname: [
        {
        value: 'Orange Juice', 
        description: 'description for Orange'
        },
        {
        value: 'Orange Color', 
        description: 'description for Orange'
        }
    ]
}
];



export default class SimpleMenu extends Component {
  constructor(props) {
    super(props);
}

render() {
    return (
        <div>
            <ContextMenuTrigger id={MENU_TYPE}>
                <div className='well'>right click menu</div>
            </ContextMenuTrigger>

            <ContextMenu id={MENU_TYPE}>                    
                {targets.map((item) => {
                            return (
                                <MenuItem>
                                    {item.name}
                                    <SubMenu>
                                    {item.subname.map(action => {
                                        {action.value}
                                    })}
                                    </SubMenu>
                                </MenuItem>
                            )
                        })}
            </ContextMenu>
        </div>
    );
 }
}

I´m getting error on this line:

 item.subname.map(action => {{action.value}})}                                                   

error: TypeError: item.subname is undefined

Is there a better way to map through the nested object?

The objective is to build the menu and submenu from the object dynamically.

Added to Colin's response (he's saying you are really looking for item.subname in that context, which looks more appropriate than your target.subname.map since you're inside a function that contains item in its scope), make sure your component handles cases where item.subname is undefined; You could do

item.subname != undefined ? 'render submenu items if any' : 'do nothing if undefined';