Add a container inside the canvas fabric js using typescript

I need to add a new container with a dynamic image inside the canvas. I checked the code and am new to learn Typescript. So I need a help here.

This is render part of the code

render() {
    const { style } = this.props;
    const { id } = this.state;
    return (
        <div
            ref={this.containerRef}
            id={id}
            className="rde-canvas"
            style={{ width: '100%', height: '100%', ...style }}
        >
            <canvas id={`canvas_${id}`} />
        </div>
    );
}

And the view is like this

I need to add a container outside of the area, where I can add a dynamic image. Thank you in advance.

Make changes to your render() function to include an additional div based on where exactly you want the image container to appear and Use a prop or state variable to dynamically set the image URL.

render() {
    const { style, imageUrl } = this.props; 
    const { id } = this.state;

    return (
        <div style={{ width: '100%', height: '100%' }}>
            
            <div className="image-container" style={{ textAlign: 'center', padding: '10px' }}>
                {imageUrl && <img src={imageUrl} alt="Dynamic" style={{ maxWidth: '100%', height: 'auto' }} />}
            </div>

            <div
                ref={this.containerRef}
                id={id}
                className="rde-canvas"
                style={{ width: '100%', height: 'calc(100% - 60px)', ...style }} 
            >
                <canvas id={`canvas_${id}`} />
            </div>
        </div>
    );
}