GridColumn isn't being interpreted

Hi,

I'm trying to implement a grid table using data which is an array of objects. Currently, my code looks something like this:

let data = [
      {
          test: "test",
          dog: "dog",

          cat: "asld"
      },
      {
          test: "afljsdojf",
          dog: "cat",

          cat: "sadfasdf"
      }
    ];

<Grid data={data} >
       <GridColumn field="test" title="Test" />
       <GridColumn field="dog" title="Dog!"/>
</Grid>

When it renders, by my interpretation it should show a table with two columns, with headers "Test" and "Dog!". Instead it shows a table with headers "test", "dog", and "cat", so essentially it's ignoring the <GridColumn> tags. 

Any advice would be appreciated!