demo code is not responsive

Hello. I modify react plotly.js demo code to make it responsive.
It works when I changed the browser width but not the height.
I check html code, height always be 450px no matter how I change style={{height: '100%', width: '100%'}}

<div class="user-select-none svg-container" style="position: relative; width: 100%; height: 450px;" >

env:
"plotly.js": "^1.58.4",
"plotly.js-basic-dist": "^1.58.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-plotly.js": "^2.5.1",
"react-scripts": "4.0.1",

There is my code
`// import './App.css';
import React from 'react'

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

class App extends React.Component {
render() {
return (
<Plot
config={{ displayModeBar: false, responsive: true }}
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
},
{type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
]}
layout={ {autosize: true, title: 'A Fancy Plot'} }
useResizeHandler={true}
style={{height: '100%', width: '100%'}}
/>
);
}
}

export default App;
`

首先，使用提供的 React App 组件以及列出的 plotly.js 和 react-plotly.js 版本重现该问题，同时调整浏览器的宽度和高度。跟踪 Plot 组件如何应用其布局和样式，然后验证图表高度是否既能响应浏览器高度的变化，也能响应宽度的变化。