Plotly Image Binding in DIV

plotly.js
1

Below is my requirement which need to be done in react

  1. Pass data and other layout options to the plotly
  2. get the Image and bind it to the DIV

Is this possible in React plotly

Below is the same code which i am using to bind plotly chart

import React, { Component } from ‘react’;
import Plot from ‘react-plotly.js’;

class PlotlyChart extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
x: [1, 2, 3],
y: [2, 6, 3],
type: ‘scatter’,
mode: ‘lines+points’,
marker: { color: ‘red’ },
},
{
type: ‘bar’,
x: [1, 2, 3],
y: [2, 5, 3]
}
],
layout: {
width: 500,
height: 600,
title: ‘A Fancy Plot’
}
};
}

render() {
    return (
        <div>
            <Plot
                data={this.state.data}
                layout={this.state.layout}
            />

            <div id="imageToBeBinded"> </div>
        </div>
    );
}

}

export default PlotlyChart;

Instead for binding the chart fully. I just want the image to be displayed in “imageToBeBinded” div with the bind data and layout.