Why I can't load an image in tui image editor in react

Hello,

My question is related to tui image editor which is free and open source.

I’m trying to load an image in tui after clicking the thumbnail image. And you can see the most related parts of the codes:

ImageContet.js

import React from 'react';
const ImageContext = React.CreateContext('null');
export default ImageContext;

ImageUpload.js

return (
            <ImageContext.provider value={this.state.selectedFile.name}>
            <div>
                <div style={mystyle} onClick={this.onNavToEditor}/>
                <h1>File Upload Demo</h1>
                <div >{this.state.uploadResult} onClick={this.onNavToEditor}</div>
                <div>
                    <input type="file" onChange={this.onFileChange} />
                    <input type="text" value={this.state.value} onChange={this.onDescriptionChange} />
                    <button onClick={this.onFileUpload}>
                        Upload!
                    </button>
                 
                </div>

                {this.listItems()}
               
                </div>
            </ImageContext.provider>
        );

ImageEditor.js

//using the context
    const currentImage = React.UseContext(ImageContext);


    //defining the function for loading the images
    openImage = () => {
        loadImageFromFile(currentImage);

    };

    componentDidMount()
    {
        this.openImage();
    };

You can see I shared the image name via context to ImageEditor.js and then tried to load it.

more details on loading image in tui:

thanks,