Can't update browser contents using react and socket.io - reactjs

Question

I'm trying to build a simple web app that displaying values in real-time.
So the code I was built is below.
import {useEffect, useState, VFC} from "react";
import {Heading} from "#chakra-ui/react";
import {useSocket} from "../../context/socketContext";
import {chartDataType} from "../../types/chartDataType";
type singleDataPair = {
dataName: string;
unixTime: number;
value: number;
}
//This function just makes a readable date and time string.
const current_time_readable = () => {
let date_obj = new Date();
return `${date_obj.getUTCFullYear()}-${('0' + (date_obj.getUTCMonth() + 1)).slice(-2)}-${('0' + date_obj.getUTCDate()).slice(-2)} ${('0' + date_obj.getUTCHours()).slice(-2)}:${('0' + date_obj.getUTCMinutes()).slice(-2)}:${('0' + date_obj.getUTCSeconds()).slice(-2)}`;
};
type Props = {
dataName: string;
};
export const ChartCard: VFC<Props> = (props) => {
const {dataName} = props;
const {socket} = useSocket();
let singleDataPair: Array<singleDataPair> = [];
const [chartData, setChartData] = useState<Array<singleDataPair>>([]);
//Update an array and setState function.
//This update is deleting its first element and add a value as its last element.
const arrayUpdate = (array: Array<singleDataPair>, value: chartDataType) => {
if (array.length > 1) {
let tempArray = array;
tempArray.shift();
tempArray.push({
dataName: dataName,
unixTime: value['end_time_unix'],
value: value[dataName],
});
setChartData(chartData => tempArray);
console.log('updated');
console.log(chartData);
}
}
//Get initial data and extract single pair of time and data.
socket.on('initial_data_to_browser', ((data) => {
if (data) {
data.forEach((obj: any) => {
singleDataPair.push({
value: obj[dataName],
unixTime: obj['end_time_unix'],
dataName: dataName,
});
});
}
setChartData(chartData => singleDataPair);
console.log('initialData:');
//This displays empty array.
console.log(chartData);
}));
//Get new data every 10 seconds and update the state using arrayUpdate function above.
socket.on('test_emit_10s', ((data) => {
if (singleDataPair) {
arrayUpdate(chartData, data);
}
}));
return (
<>
{
//Display the data on the browser
chartData ? (chartData.map((data: any) => (
<Heading as="h1"
key={data.unixTime}>{`${current_time_readable()} | ${data.unixTime} | ${data.value}`}</Heading>
))) : null
}
</>
)
}
The above code just executes get initial data the time getting initial_data_to_browser event at first then getting update data constantly the time getting test_emit_10s event.
But this code does not work properly.
I can not figure out the exact usage of setState of react in this case. This code has two problems below.
Problem1(regarding displaying the initial data)
The code above can display initial data the time getting the initial_data_to_browser event on the browser.
On the other hand, the result of the console.log inside the callback of this event is an empty array. Why?
Problem2(regarding updating the data and displaying it)
The time getting test_emit_10s event, it can not update the browser display.
On the other hand, the result of console.log inside the callback of this event can be updated. Why?
In the end, the result of console.log and the display of the browser does not correspond.
In my idea, the reason for this problem is my usage of setState.
But I can not come up with a solution for these problems.
Anyone who can help me?
Just in case, the socketContext provider code is below. This simply provides a socket object.
import { useContext, createContext } from "react";
import {io, Socket} from "socket.io-client";
type Context = {
socket: Socket,
}
const socket: Socket = io("http://***.***.***.***");
const SocketContext = createContext<Context>({
socket,
});
const SocketProvider = (props: any) => {
return (
<SocketContext.Provider value={{ socket }} {...props} />
);
}
const useSocket = () => useContext(SocketContext);
export { SocketProvider, useSocket }