title: how to set column name in mui datatables using object key
body: <p>I'm trying to use an object key to set the name of a column in MUI Datatables.
  I'm trying to set one of the column names with the first element of children.childName
  so that in that column it will display list of child names, but only the first child.</p>
  
  <p>In Current way that Im trying this, I am getting no errors, and its displaying nothing in the childName Column on the table.</p>
  
  <p>How Can I access an object thats inside an array? </p>
  
  <p><a href="https://i.stack.imgur.com/jHMVQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jHMVQ.png" alt="screen shot of display table"></a></p>
  
  <p>This is my Data:</p>
  
  <pre><code>    const data = [
    {
      name: "Pat",
      company: "Test Corp",
      city: "Yonkers",
      state: "NY",
      children: [
        { childName: "Pat Jun", childAge: 2 },
        { childName: "Mary Jun", childAge: 2 }
      ]
    },
  ];
  
  
      const columns = [
    {
      name:name: data[0]["children"][0]["childName"],
      label: "Child Name",
      options: {
        filter: true,
        sort: true
      }
    }]
  </code></pre>
  
  <p><strong>MuiTable.js</strong> </p>
  
  <pre><code>function MuiTable({ forms }) {
    console.log("cols", columns);
    return (
      &lt;MUIDataTable
        title={"Title"}
        data={data}
        columns={columns}
        options={options}
      /&gt;
    );
  }
  </code></pre>
  
  <p>By doing a console.log I can see that it is printing the value instead of the object key name</p>
  
  <p><a href="https://i.stack.imgur.com/TUvdY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TUvdY.png" alt="console.log of columns "></a></p>
  
  <p>I would really appreciate any help, Thank you.</p>