Plot auto range issue with dynamic multi scatter plot in a page

plotly.js
1

I am trying to generate multiple plots using plotly and react js. On first load everything is fine and I get all dots on each plot at correct position. But when I update or click on any one plot, it is updating range of all plots to the range of last plot. Except last plot, when I hover on other plots, hover text is showing somewhere else and dots are showing somewhere.
I have these functions in javascript:

getAllScatterPlot(scatterPlotData){
        const {splittedScatterPlotLayouts} = this.state;
        let columns = [];
        for(let p in scatterPlotData){
            let data = scatterPlotData[p];
            let plotData = {my data object};
            columns.push(
                <div key={p} className={"col-6"} style={{width: "50%", height:"25%"}}>                 
                    {this.getScatterPlot(Object.assign([],plotData), p)}
                </div>
            )
        }
        return(
            <div key={""} id={"splitted-plot-row"} tabIndex={0} className={"row"}>{columns}</div>
        )
    }

getScatterPlot(scatterPlotData, divId){
        const {splittedScatterPlotLayouts} = this.state;
        return (
            <Plotly
                divId={divId}
                data={scatterPlotData}
                layout={splittedScatterPlotLayouts.layout}
                frames={splittedScatterPlotLayouts.frames}
                config={splittedScatterPlotLayouts.config}
                useResizeHandler={true}
                style={{height:'100%', width:'100%'}}
                onSelected={(selectedPoints) => {
                    this.onPointsSelection(selectedPoints)
                }}
                onDeselect={() => {
                    this.onPointsDeselection();
                }}
            />
        )
    }

And I have this in layout:
layout: {
hovermode: ‘closest’,
autosize: true,
margin: {
l: 50,
r: 35,
b: 35,
t: 80
},
plot_bgcolor: ‘#efe6e6’,
showlegend: true,
title: ‘Scatter Plot’,
xaxis: {title: ‘x-data’},
yaxis: {title: ‘y-data’},
legend: {
x: 0,
y: 1.1,
orientation: ‘h’,
traceorder: ‘normal’,
font: {
family: ‘sans-serif’,
size: 15,
color: ‘#000’
},
bgcolor: ‘transparent’
},
dragmode: ‘lasso’
},
frames: [],
config: {
editable: false,
modeBarButtonsToAdd:[],
modeBarButtonsToRemove: []
}

2

I found out that the height of plot is increasing on each click. What could be the actual reason for it?