InMemoryTable - Cannot read property 'sortable' of undefined when columns change

[PhaedrusTheGreek]

EUI: 6.10.7

Simultaneously changing the sort and the columns results in error: Cannot read property 'sortable' of undefined

To reproduce:

class App extends React.Component {

   store = [
    {
      'firstName': 'Shay',
      'lastName': 'Banon'
    }
  ]

   columns = [{
    field: 'firstName',
    name: 'First Name',
    sortable: true,
    truncateText: true,
  }];

   sorting = {
    sort: {
      field: 'firstName',
      direction: 'desc',
    }
  };

   handleClick = (e) => {
    this.columns = [{
      field: 'lastName',
      name: 'Last Name',
      truncateText: true,
     }
    ]

    this.sorting = {
      sort: {
        field: 'lastName',
        direction: 'desc',
      }
    };

    this.setState({})
    
  }

  render() {

  return (
    <EuiPage>
    <EuiPageBody>
      <EuiPageContent verticalPosition="center" horizontalPosition="center">
        <EuiPageContentHeader>
          <EuiPageContentHeaderSection>
            <EuiTitle>
            <a href="/#" onClick={this.handleClick}>
              Click me
            </a>
            </EuiTitle>
          </EuiPageContentHeaderSection>
        </EuiPageContentHeader>
        <EuiPageContentBody>
        <EuiInMemoryTable
          items={this.store}
          columns={this.columns}
          pagination={true}
          sorting={this.sorting}
        />
        </EuiPageContentBody>
      </EuiPageContent>
    </EuiPageBody>
  </EuiPage>
  
  )};    

  
}

[PhaedrusTheGreek]

There's two ways to trigger this:

• Set this.sorting then remove the sorted column
• Manually set the sorted column in the UI and then remove the sorted column