react display multi dimensional array from redux-form - reactjs

Question

I need to display data in table with crud from redux-form with field arrays. What the best way would be to do this in Reactjs?
At the moment I am using react-table, but cant get subtable maped with parent values it just repeats the same values. Any ideas? Thanks
table sample code below for this table:
var result = _.flatMap(items, item =>
_(item.panel_group)
.map(v => ({id: item._id, inst_name:item.name, lat:item.lat, lon:item.lon, pv_name: v.name, azimuth: v.azimuth, inv_eff: v.inv_eff, losses: v.losses, system_capacity: v.system_capacity, tilt: v.tilt}))
.value()
);
const columns2 = [
{
Header: "Pv Name",
id:"pv_name",
accessor:"pv_name"
},
{
Header: "Size",
id:"size",
accessor:"system_capacity"
},
{
Header: "losses",
id: "losses",
accessor: "losses"
},
]
<div>
<ReactTable
data={items}
columns={columns}
defaultPageSize={5}
filterable
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
<ReactTable
data={result}
columns={columns2}
defaultPageSize={3}
showPagination={false}
/>
</div>
);
}}
/>
</div>
as well I tried to do like this as well result in picture :
{
Header: "Instalation Name",
id:"name",
accessor: "name"
},
{
Header: "latitude",
id: "latitude",
accessor: "lat"
},
{
Header: "longitude",
id: "longitude",
accessor: "lon"
},
{
Header: "Pv Name",
id:"pv_name",
accessor:row => {
return (
<div>
{row.panel_group.map((panel) => (
<div key={panel.id}>{panel.name} </div>
))}
</div>
)
},
},
{
Header: "Size",
id:"size",
accessor:row => {
return (
<span>
{row.panel_group.map((panel) => (
<div key={panel.id}>{panel.system_capacity}</div>
))}
</span>
)
},
},
is there any better ways to represent such data?
sample json
[
{
"_id": "59e0cbdf438488010f84968d",
"name": "hh",
"lat": 12.33,
"lon": -12.555,
"panel_group": [
{
"installation_id": "test",
"name": "name",
"system_capacity": 2,
"azimuth": 120,
"tilt": 12,
"losses": 4,
"inv_eff": 98,
"_id": "59e0cbdf438488010f84968f",
},
{
"installation_id": "test2",
"name": "name2",
"system_capacity": 1,
"azimuth": 110,
"tilt": 11,
"losses": 14,
"inv_eff": 18,
"_id": "59e0cbdf438488010f84968e"
}
],
{
"_id": "59e7798821306f001beeed19",
"name": "installation1",
"lat": 12.33,
"lon": -12.555,
"panel_group": [
{
"name": "panelgroup1",
"system_capacity": 20,
"azimuth": 120,
"tilt": 12,
"losses": 4,
"inv_eff": 98,
"_id": "59e7798821306f001beeed1b"
},
{
"name": "panelgroup2",
"system_capacity": 100,
"azimuth": 110,
"tilt": 11,
"losses": 14,
"inv_eff": 18,
"_id": "59e7798821306f001beeed1a"
}
],
}]