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

Commencez par reproduire le problème avec le composant React App fourni et les versions indiquées de plotly.js et react-plotly.js, en redimensionnant à la fois la largeur et la hauteur du navigateur. Suivez la manière dont le composant Plot applique sa mise en page et son style, puis vérifiez que la hauteur du graphique réagit aussi bien aux changements de hauteur du navigateur qu’aux changements de largeur.