React error - check the render method of `t`

I switched from material-ui table to MuiDataTable for it's ease of use, but I am seeing a warning, even though the component is functioning as expected. With that said, warnings bother me.

The following is the code for the component:

import React from "react";
import CsvDownload from 'react-json-to-csv'
import MUIDataTable from "mui-datatables";
import { messageService } from "../services/order-item-service";

export default class OrderItemComponent2 extends React.Component {
  state = {
    data: [],
    _columns: [],
    Header: [],
    totalCount: 10,
    options: {
      pageSize: 16,
      page: 0,
      filterType: "dropdown",
      selectableRows: false,
      responsive: "scroll",
      resizableColumns: true,
      key: ""
    }
  };

  componentDidMount() {
    this.subscription = messageService.getMessage().subscribe((message) => {
        let result = message;
        this.setState({ data: result.message });
        this.setState({ Header: [
          {
            name: 'order_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head first-col'>Order Id</th>
              ),
              customBodyRender: (value, i) => (
              <span>{ value }</span>
              )
            }
          },
          {
            name: 'order_item_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sec-col'>Order Item</th>
              )
            }
          },
          {
            name: 'product_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Prod ID</th>
              )
            }
          },
          {
            name: 'code_division',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head thr-col'>Div</th>
              )
            }
          },
          {
            name: 'code_product',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Prod Code</th>
              )
            }
          },
          {
            name: 'quantity_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Qty Due</th>
              )
            }
          },
          {
            name: 'quantity_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Qty Sh</th>
              )
            }
          },
          {
            name: 'price',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Price</th>
              )
            }
          },
          {
            name: 'date_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Sh</th>
              )
            }
          },
          {
            name: 'date_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Due</th>
              )
            }
          },
          {
            name: 'customer_id',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Cust ID</th>
              )
            }
          },
          {
            name: 'ship_via',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Ship Via</th>
              )
            }
          },
          {
            name: 'value_due',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Val Due</th>
              )
            }
          },
          {
            name: 'value_shipped',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head sm-col'>Val Sh</th>
              )
            }
          },
          {
            name: 'date_order',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head mid-col'>Dt Or</th>
              )
            }
          },
          {
            name: 'date_modified',
            options: {
              customHeadRender: () => (
                <th className='MuiTableCell-root MuiTableCell-head bg-col'>Dt Mod</th>
              )
            }
          }] 
        });

        this.setState({
          totalCount: Math.ceil(this.state.data.length / this.state.pageSize)
        });

    });
  }

  componentWillUnmount() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

  getOrderItem() {
    this.setState({ data: messageService.getMessage() });
  }

  render() {

    return (
      <div>
        <CsvDownload className='btn btn-primary' data={ this.state.data } />

        <MUIDataTable
        title="Order Item"
        data={this.state.data}
        columns={this.state.Header}
        options={this.state.options}
      />
      </div>
    );
  }
}

As you can see, I am using the customHeadRender to make custom headers and that is when the warning first appeared. Other than that, it is functioning as expected.

Line 33 is the first customHeadRender

As usual, thanks in advance

Solution

I had to initialize the header (column names) within the componentDidMount() function

import React from "react";
import CsvDownload from 'react-json-to-csv'
import MUIDataTable from "mui-datatables";
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from '../theme';
import { messageService } from "../services/order-item-service";

export default class OrderItemComponent2 extends React.Component {
  state = {
    data: [],
    _columns: [],
    Header: [],
    totalCount: 10,
    counter: 0,
    options: {
      pageSize: 16,
      page: 0,
      filterType: "dropdown",
      selectableRows: false,
      responsive: "scroll",
      resizableColumns: true,
      className: this.name
    }
  };

  componentDidMount() {
    this.subscription = messageService.getMessage().subscribe((message) => {
        let result = message;

        this.setState({ data: result.message });
        this.setState({ Header: [
          {
            label: "Order ID",
            name: 'order_id',
            options: {
              className: 'first-col'
            }
          }, 
          {
            label: "Item ID",
            name: 'order_item_id',
            options: {
              className: 'sec-col'
            }
          },
          {
            label: "Prod ID",
            name: 'product_id',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Div",
            name: 'code_division',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Prod Code",
            name: 'code_product',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Qty Due",
            name: 'quantity_due',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Qty Sh",
            name: 'quantity_shipped',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Price",
            name: 'price',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Dt Sh",
            name: 'date_shipped',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Dt Due",
            name: 'date_due',
            options: {
              className: 'mid-col'
            }
          },
          {
            label: "Cust ID",
            name: 'customer_id'
          },
          {
            label: "Ship Via",
            name: 'ship_via',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Val Due",
            name: 'value_due',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Val Sh",
            name: 'value_shipped',
            options: {
              className: 'sm-col'
            }
          },
          {
            label: "Dt Or",
            name: 'date_order',
            options: {
              className: 'bg-col'
            }
          },
          {
            label: "Dt Mod",
            name: 'date_modified',
            options: {
              className: 'bg-col'
            }
          }] });

        this.setState({
          totalCount: Math.ceil(this.state.data.length / this.state.pageSize)
        });

    });
  }

  componentWillUnmount() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

  getOrderItem() {
    this.setState({ data: messageService.getMessage() });
  }

  render() {

    return (
      <div>
        <CsvDownload className='btn btn-primary' data={ this.state.data } />
        <MuiThemeProvider theme={theme}>
          <MUIDataTable
          title="Order Item Table"
          data={ this.state.data }
          columns={ this.state.Header }
          options={ this.state.options }
        />
        </MuiThemeProvider>
      </div>
    );
  }
}