How to make basic area high Charts responsive?

Question

Basic area chart in High Charts is responsive only when the page is not refreshed and as soon the page is refreshed it will not be responsive.

enter image description here the is the image of the page responsive with the code

enter image description herethis is the image of the same page when not responsive

I have tried this https://codesandbox.io/s/highcharts-react-demo-ko0m91?file=/demo.jsx and still its not working

// the complete code is given below

import * as Yup from 'yup';
import React, { useState } from 'react';
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

export default function graph() {
const options = {
    title: {
        text: 'Emotion Analysis'
    },
    series: [{
        type: 'area',
        name: 'Honduras',
        data: [0.9, 0.1, 0.8, 0.7, 0.5]
    },
    {
        type: 'area',
        name: 'Spain',
        data: [0.3, 0.1, 0.0, 0.2, 0.1]
    },
    {
        type: 'area',
        name: 'Afghanistan',
        data: [0.3, 0.1, 0.0, 0.2, 0.1]
    },
    {
        type: 'area',
        name: 'Sudan',
        data: [0.0, 0.2, 0.1, 0.0, 0.0]
    },
    {
        type: 'area',
        name: 'Denmark',
        data: [0.0, 0.2, 0.2, 0.0, 0.0]
    },
    {
        type: 'area',
        name: 'Nepal',
        data: [0.1, 0.0, 0.9, 0.0, 0.4]
    },
    ],
    credits: {
        enabled: false
    },
    scrollbar: {
        enabled: true
    },

        };

     return (
            <Box>
                 <div style={{ height: "400px", marginTop: '15px' }}>
                 <HighchartsReact 
                           containerProps={{ style: { height: "100%" } }}
                       highcharts={Highcharts}
                       options={options} 
                       value= {options}
                       />
        </Box>
            );
  }