Не удается получить доступ к class.contextType в дочернем компоненте

Я хочу создать простое веб-приложение React с использованием Context API. Я хочу инициализировать объект контекста в родительском компоненте и хочу использовать его в дочернем компоненте используя "class.contextType".

Я прочитал связь.

И я попытался закодировать, как показано ниже:

DrawArea.js // родительский компонент, который содержит провайдер контекста и дочерний компонент

import React, {Component} from "react";
import DrawReflect from "./DrawReflect";
import "./DrawArea.css";

export const DrawToolContext = React.createContext();

class DrawArea extends Component{


    constructor(props){
        super(props);

        this.state = {
            drawTool: "line"
        };

    }

    render(){
        return (
            <div className = "DrawArea">  
                <DrawToolContext.Provider value = {this.state}>   
                    <div className = "box reflect">   
                        <DrawReflect />
                    </div>
                </DrawToolContext.Provider>
            </div>
        );
    }
}

export default DrawArea;

DrawReflect.js // дочерний компонент, который принимает контекст от DrawArea и использует его

import React, {Component} from "react";
import {DrawToolContext} from "./DrawArea";
import "./DrawReflect.css";

class DrawReflect extends Component{

    render(){
        return (
            <div className = "DrawReflect">
                <p>test</p>
            </div>
        );
    }

}

DrawReflect.contextType = DrawToolContext;

export default DrawReflect;

Но он возвращает ошибки, говоря: ReferenceError: невозможно получить доступ к DrawToolContext до инициализации.

Это полный стек ошибок:

Module.DrawToolContext
http://localhost:3000/static/js/main.chunk.js:473:107
Module../src/pages/draw/fragments/DrawReflect.js
D:/CommuMind/front-react/src/pages/draw/fragments/DrawReflect.js:17
  14 | 
  15 | }
  16 | 
> 17 | DrawReflect.contextType = DrawToolContext;
  18 | 
  19 | export default DrawReflect;
View compiled
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/pages/draw/fragments/DrawArea.js
http://localhost:3000/static/js/main.chunk.js:476:70
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/pages/draw/DrawPage.js
http://localhost:3000/static/js/main.chunk.js:335:77
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/App.js
http://localhost:3000/static/js/main.chunk.js:145:78
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:247:62
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:734:18
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
checkDeferredModules
D:/CommuMind/front-react/webpack/bootstrap:45
  42 |  }
  43 |  if (fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
D:/CommuMind/front-react/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57

Что пошло не так???