Ошибка типа: __WEBPACK_IMPORTED_MODULE_0_react__. UseContext не является функцией

Question

Нужна помощь в выяснении, почему контекстные хуки дают ошибку. Это моя вина или есть ошибка.

Я работаю с реагировать + машинопись. Это простой компонент, в котором я хотел получить доступ к двум моим контекстам. Я не могу понять, где проблема. Я прилагаю файл, который работает без контекстных хуков и тот, который дает ошибку с контекстными хуками.

---

ошибка, отображаемая в chrome (запуск пряжи)

TypeError: __WEBPACK_IMPORTED_MODULE_0_react__.useContext is not a function
new ButtonContractExpand
E:/.../button-contract-expand.tsx:12
   9 | }
  10 | 
  11 | export default class ButtonContractExpand extends React.Component<Props, {}> {
> 12 |   private appStateContextHook = React.useContext(jayannAppStateContext)
  13 |   private appStoreContextHook = React.useContext(jayannAppStoreContext)
  14 | 
  15 |   constructor(
View compiled
▶ 23 stack frames were collapsed.
./src/index.tsx
E:/.../src/index.tsx:7
   4 | import './index.css'
   5 | import registerServiceWorker from './registerServiceWorker'
   6 | 
>  7 | ReactDOM.render(
   8 |   <App />,
   9 |   document.getElementById('root') as HTMLElement,
  10 | )
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

---

кнопка, которая использует контекст через хуки, выдает ошибку "заголовок вопроса"

import * as React from 'react'
import { FormattedHTMLMessage } from 'react-intl'
import { jayannAppStateContext } from 'src/App'
import { jayannAppStoreContext } from 'src/App'

interface Props {
  dataTarget: string
  ariaControls: string
}

export default class ButtonContractExpand extends React.Component<Props, {}> {
  private appStateContextHook = React.useContext(jayannAppStateContext)
  private appStoreContextHook = React.useContext(jayannAppStoreContext)

  constructor(
    props: Props,
  ) {
    super(props)
  }

  private button = {
    state: 'expand',
    text: (state: string): JSX.Element =>
      state === 'contract'
        ? <FormattedHTMLMessage id="common.button.contract" />
        : <FormattedHTMLMessage id="common.button.expand" />,
    switchState: (state: string): string =>
      state === 'contract'
        ? 'expand'
        : 'contract',
  }

  private icon = {
    class: (state: string, contract: string, expand: string) =>
      state === 'contract'
        ? contract
        : expand,
  }

  public render = () =>
    <button
      className={this.appStoreContextHook.buttonContractExpand}
      type="button"
      data-toggle="collapse"
      data-target={this.props.dataTarget}
      aria-expanded="false"
      aria-controls={this.props.ariaControls}
      onClick={() => {
        this.button.state = this.button.switchState(this.button.state)
        this.appStateContextHook.reRenderAppState()
      }}
    >
      {this.button.text(this.button.state)}
      <i className={this.icon.class(this.button.state, this.appStoreContextHook.fontawesomeIconContractClassName, this.appStoreContextHook.fontawesomeIconExpandClassName)} />
    </button>
}

---

кнопка, которая использует контекст без ошибок

import * as React from 'react'
import { FormattedHTMLMessage } from 'react-intl'
import { jayannAppStateContext } from 'src/App'
import { jayannAppStoreContext } from 'src/App'

interface Props {
  dataTarget: string
  ariaControls: string
}

export default class ButtonContractExpand extends React.Component<Props, {}> {

  constructor(
    props: Props,
  ) {
    super(props)
  }

  private button = {
    state: 'expand',
    text: (state: string): JSX.Element =>
      state === 'contract'
        ? <FormattedHTMLMessage id="common.button.contract" />
        : <FormattedHTMLMessage id="common.button.expand" />,
    switchState: (state: string): string =>
      state === 'contract'
        ? 'expand'
        : 'contract',
  }

  private icon = {
    class: (state: string, contract: string, expand: string) =>
      state === 'contract'
        ? contract
        : expand,
  }

  public render = () =>
    <jayannAppStateContext.Consumer>
      {shadowAppStateContextValue =>
        <jayannAppStoreContext.Consumer>
          {shadowAppStoreContextValue =>
            <button
              className={shadowAppStoreContextValue.buttonContractExpand}
              type="button"
              data-toggle="collapse"
              data-target={this.props.dataTarget}
              aria-expanded="false"
              aria-controls={this.props.ariaControls}
              onClick={() => {
                this.button.state = this.button.switchState(this.button.state)
                shadowAppStateContextValue.reRenderAppState()
              }}
            >
              {this.button.text(this.button.state)}
              <i className={this.icon.class(this.button.state, shadowAppStoreContextValue.fontawesomeIconContractClassName, shadowAppStoreContextValue.fontawesomeIconExpandClassName)} />
            </button>
          }
        </jayannAppStoreContext.Consumer>}
    </jayannAppStateContext.Consumer>
}

---

package.json

{
  "homepage": ".",
  "name": "dlaniewidomych.s2projekt.pl",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/react-intl": "^2.3.14",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-facebook": "^6.0.15",
    "react-intl": "^2.7.2",
    "react-scripts-ts": "^3.1.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.10",
    "@types/node": "^10.12.12",
    "@types/react": "^16.7.13",
    "@types/react-dom": "^16.0.11",
    "babel-plugin-react-intl": "^3.0.1",
    "typescript": "^3.2.2"
  }
}