My new panel made with Plotly.js cannot maintain its state when resizing

[neo622]

Hello, I developed the Grafana plug-in panel with Plotly.js, and after applying it, I zoomed in on the graph and resized the Internet window, and it initialized to its original state.
Below is my Plotly plug-in code that I made simply.Preformatted text

I applied it to a regular site, not Grafana, with the same code as I thought it might be a problem, but there was no problem like this.
There’s a message that ‘stylesFactory’ is deprecated, is this a problem?
How can I keep the graph in its initial state when I resize the Internet window?

Thank you.

import React, { useState, useEffect } from 'react';
import { PanelProps } from '@grafana/data';
import { css, cx } from 'emotion';
import { stylesFactory, useTheme } from '@grafana/ui';  //'stylesFactory' is deprecated
import axios from 'axios'
import Plot from "react-plotly.js"

interface Props extends PanelProps {}

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
  const theme:any = useTheme();
  const styles = getStyles();
  const Plotlydata = [
        {
            x: [1,2,3,4,5]
            y: [3,1,2,5,2]
            name: 'Parameter',
            line: {
              color: `rgb(0,255,0)`,
          },
          hovertemplate: '%{x} ,%{y} <extra></extra>'
        }
        ]
 const Plotlylayout:any = {  
        title: Fdc_title,
        "titlefont": { size: 14 },
        autosize: true,
        updatemenus: updatemenus,
        displayModeBar: true,        
    }


  return (
    <div
      className={cx(
        styles.wrapper,
        css`
          width: ${width}px;
          height: ${height}px;
          overflow-x: scroll;
          overflow-y: scroll;
        `
      )}
    >
    
      <Plot
      layout = {{ autosize : true}}
      useResizeHandler = {true}
      style = {{width: width, height: height}}
      data = {Plotlydata}
      layout = {Plotlylayout} />

      <div className={styles.textBox}>
        {options.showSeriesCount && (
          <div
            className={css`
              font-size: ${theme.typography.size[options.seriesCountSize]};
            `}
          >
            Number of series: {data.series.length}
          </div>
        )}
        
      </div>
    </div>
  );
};

const getStyles = stylesFactory(() => {
  return {
    wrapper: css`
      position: relative;
    `,
    svg: css`
      position: absolute;
      top: 0;
      left: 0;
    `,
    textBox: css`
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 10px;
    `,
  };
});```