Unhandled Runtime Error in react class component when using async function

When I run getData in the following

const FunctionalComponent = observer(): JSX.Element => {
  const { userStore, authStore } = useStores()

  const getData = async (): Promise<void> => {
    const result = await userStore.findById(authStore.id)

    console.log('result in getData', result)
  }

  useEffect(() => {
    getData()
  }, [])
})

I console.log

{
  clientSettings: {test: 'hello'}
}

When I attempt run getData in a React class component like the following

class AUIGrid extends React.Component<Props, State> {

  getData = async (): Promise<void> => {
    const { userStore, authStore } = useStores()
    const result = await userStore.findById(authStore.id)

    console.log('result in getData', result)
  }

  saveColumnLayoutWithOrder = (): void => {
    this.getData()
  }
}

and run saveColumnLayoutWithOrder with

<button onClick={() => {this.saveColumnLayoutWithOrder()}}>save</button>

I get an Unhandled Runtime Error

Why am I getting this error?