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;
`

Bắt đầu bằng cách tái hiện vấn đề với component React App được cung cấp và các phiên bản plotly.js và react-plotly.js được liệt kê, đồng thời thay đổi cả chiều rộng và chiều cao của trình duyệt. Theo dõi cách component Plot áp dụng layout và style của nó, sau đó xác minh rằng chiều cao của biểu đồ phản hồi với cả các thay đổi về chiều cao trình duyệt và các thay đổi về chiều rộng.