I am creating a table that can be exportable using React Material Table. I have one column with a material icon, but it doesn't get displayed on export, so i resulted to conditional rendering, im hiding the column with the icon on export with export: true and displaying the actual text in a different column to be displayed on export for export. I have used the property hidden: true but the contents of my export do not get displayed. Do the properties hidden and export work together. Any advise on better approaches i can use will be appreciated. Thanks

Here is my code :

const columns = [
    {
      field: '',
      title: 'Variance',
      render: (list) => {
        if(list.objectives.overallStatus === 'COMPLETE' || list.objectives.overallStatus === 'Complete') {
            return (<FiberManualRecord style={{color : '#29A15B'}} />)
        }  else if(list.objectives.overallStatus === 'INCOMPLETE' || list.objectives.overallStatus === 'Incomplete' || list.objectives.overallStatus === null ) {
            return (<FiberManualRecord style={{color : '#F44336'}}/>) 
        }
      }
    },
    {
        field: 'var',
        title: 'Variance',
        export: true,
        hidden: true
        
    }
]

<MaterialTable
   title="Strategic Objective Reports."
   data={items}
   columns={columns}
   options={{
    search: true,
    sorting: true,
    pageSize: 10,
    pageSizeOptions: [10,50,100 ],
    exportButton: true
  }}