React Highcharts not Updating - highcharts

Question

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import React, { useState } from 'react'
const BarChart = () => {
const API = process.env.REACT_APP_API_URL;
var optionsInitial: Highcharts.Options = {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
'#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
type: "bar",
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
type: "bar",
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
type: "bar",
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
type: "bar",
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
}
const [options, setOptions] = useState<Highcharts.Options>(optionsInitial)
React.useEffect(() => {
fetch(`${API}Clientcomparison/GetSentiment`, {
method: "GET",
headers: {
'Authorization': 'Bearer ' + localStorage.getItem("#token"),
'Content-Type': 'application/json'
}
})
.then((res) => {
return res.json()
})
.then((res : Array<object>) => {
debugger
let optToUpdate = optionsInitial;
let seriesToUpdate: any[] = [];
res.forEach((i:any)=>{
seriesToUpdate = seriesToUpdate.concat([
{
type: "bar",
name: i.categorycount,
data: [814, 841, 3714, 727, 31]
}
])
})
optToUpdate["series"] = seriesToUpdate
setOptions(optToUpdate)
console.log(res)
})
.catch((err) => console.log(err))
}, []);
return (
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
)
}
export default BarChart;
I have tried multiple solutions but not working.
I tried
updateArgs={[true, true, true]}
allowChartUpdate={true}
oneToOne={true}
but no luck.
I am rendering chart first time with hard coded data, then sending API call to fetch data in useEffect and updating the state. I can see in debug tool that state is updated but it is not reflecting.