How can I access nested arrays in a data object to assign as prop values for a data-grid?

I have a data grid which takes array values for rows and columns. The necessary values come from a data object with 3 layers of nestin. Here is what it looks like:

export const duplicatesBySourceGridData = {

 'dataFamily':{
        'fuzzyDuplicates':{
            'columns':[
                  { key: 'id', name: 'ID' },
                  { key: 'title', name: 'Title' }
                ],
            'rows':[
                  { id: 0, title: 'Example' },
                  { id: 1, title: 'Demo' }
                ]    
        },
        'exactDuplicates':{
          'columns':[
                { key: 'id', name: 'ID' },
                { key: 'title', name: 'Title' }
              ],
          'rows':[
                { id: 0, title: 'Example' },
                { id: 1, title: 'Demo' }
              ]    
      }
    }
}

Currently, I'm trying to access them like below (Note that tooltip is a function of hovering over a graphical element, indexValue returns the value "dataFamily" and id returns either fuzzyDuplicates or exactDuplicates)

tooltip={({ id, value, color, indexValue }) => (
                        <div>
                            <Grid
                                column={duplicatesBySourceGridData[indexValue][id][`columns`]}
                                rows={duplicatesBySourceGridData[indexValue][id][`rows`]}
                            />
                        </div>                        
                    )}

This does not work, either the issue is with how I'm assigning the prop or how I'm setting up the dataObject.

Cheers.

I don't know if this will solve your issue, but you don't need to use the tick-mark string interpolation syntax to access a key in duplicatesBySourceGridData with the value stored in a variable like indexValue:

<Grid
  columns={duplicatesBySourceGridData[indexValue][id].columns}
  rows={duplicatesBySourceGridData[indexValue][id].rows}
/>