Cuando ejecuto getData en lo siguiente

 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() }, []) })

Yo console.log

 { clientSettings: {test: 'hello'} }

Cuando intento ejecutar getData en un componente de clase React como el siguiente

 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() } }

y ejecute saveColumnLayoutWithOrder con

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

Recibo un Unhandled Runtime Error no controlado

¿Por qué recibo este error?

edición de la explicación useStores :

 import React from 'react' import { StoresContext } from '../contexts' import ContextProps from '@/interfaces/context-props' const useStores = (): ContextProps => React.useContext(StoresContext) export default useStores