Table example with object not working

import React, { Fragment } from 'react'
import { Table, TableBody, TableHead } from 'mdbreact'

export default (data) => (
  <Fragment>
    <h1> Kalendarz zajeć</h1>
    <button type="button" className="btn btn-primary btn-sm">Matematyka</button>

      {data && <div>
          <pre>{JSON.stringify(data.columns)}</pre>
          <pre>{JSON.stringify(data.rows)}</pre>
    </div>}
    <Table>
      <TableHead columns={data.columns} />
      <TableBody rows={data.rows} />
    </Table>

      {!data && <h1>loading</h1>}
  </Fragment>

)

import {observable, action} from "mobx";
import singleton from 'decorators/Singleton'


@singleton
export default new class
{
  @observable data;

    @action.bound
    async getCalendar() {
        this.data = {
            columns: [
                {
                    label: '#',
                    field: 'id'
                },
                {
                    label: 'First',
                    field: 'first'
                },
                {
                    label: 'Last',
                    field: 'last'
                },
                {
                    label: 'Handle',
                    field: 'handle'
                }
            ],
            rows: [
                {
                    'id': 1,
                    'first': 'Mark',
                    'last': 'Otto',
                    'handle': '@mdo'
                },
                {
                    'id': 2,
                    'first': 'Jacob',
                    'last': 'Thornton',
                    'handle': '@fat'
                },
                {
                    'id': 3,
                    'first': 'Larry',
                    'last': 'the Bird',
                    'handle': '@twitter'
                }
            ]
        };
    }
}()