Attempting to output text that's within an array in another array - React JS

I'm trying to expand the functionality of my tab array to be able to have a back and forth button like in chrome, allowing users to go through their history within that tab.

Example of tabArray

const [tabArray, setTabArray] = useState([{ContentList:[{TabText:'Home', Content:<Home/>, Current:false},{TabText:'Convert Temp', Content:<ConvertTemp/>, Current:true}], Selected:true}])

tabArray will look something like the example: The first object being an array that holds a number of objects that describes the tab: the text in the tab, content shown for the tab, and whether it is the active content for the tab. The Current boolean will be what I control when the user is going back and forth in their tab history.

The second object is a boolean called Selected, this controls which tab is currently being displayed and tweaks the look of the tab itself to make it more clear which is the current active tab.

My issue comes from trying to output the ContentList array inside tabArray. I'm able to construct it all how I wish, even getting console logs to show exactly what I expect. But when I try to return the values out it doesn't seem to go all the way.

This is my code to display the text in the tab bar, it should loop through tabArray, then loop through ContentList and get the details of the currently active tab to fill the cell in the table. There should be one td for each object inside tabArray. i.e for my example, I expect to see "Home" and "Convert Temp". The Selected boolean is then used to affect the classname.

I've now fixed this, I had to bring the return a level higher, this now displays the text in the tabs.

<tr>
          {tabArray.map((v,index) => {
            return (
            v.ContentList
              .filter(list => list.Current)
              .map(list => 
                //return (
                  <td key={index} 
                      className={v.Selected ? "selected" : "hide"} > 
                    <div className="TabText" onClick={() => selectByIndex(index, setTabArray)}>{list.TabText}</div>
                    <button className="CloseTab" onClick={() => deleteByIndex(index, setTabArray)} >x</button>
                  </td>
                //)
              )
            )
          })}
</tr>

This is how I show the content of the tabs, it show loop through tabArray, whichever tab is Selected, it loops through it's ContentList and then returns the current Content. If it's not selected, it returns the current content hidden.

I've resolved this now too, brought out the return similar to what I did above, and also realised I was trying to reference current and not Current.

let tabContent = [
  tabArray.map((v, index) => {
    return(
      v.Selected?

        v.ContentList
          .filter(list => list.Current)
          .map(list => 
            <div key={index}> {list.Content} </div>
          )
      :
        v.ContentList
          .filter(list => list.Current)
          .map(list => {
              return <div key={index} className='hidden'> {list.Content} </div>
          })
    )
    // if (v.Selected) { 
    //     v.ContentList
    //       .filter(list => list.current)
    //       .map(list => 
    //         <div key={index}> {list.Content} </div>
    //       )
    // }
    // else {
    //   v.ContentList
    //     .filter(list => list.current)
    //     .map(list => {
    //         return <div key={index} className='hidden'> {list.Content} </div>
    //     })
    // } 
  })
]

// console.log(tabContent)

return tabContent

Any help will be appreciated. I can explain more details if I haven't been clear enough. Thanks in advance.

I found the issue, I primarily needed to bring the return to a lower level in the code. And my issue trying to set tabContent was also from incorrectly referencing list.current instead of list.Current