I have the daily chart which is loaded with historical data already, and I need to update the tick data everyday when the market opens.

When I use .update it update the chart but it move one more step to the right, rather than being stationary since all the tick data are for that particular day.

import React, { useState, useEffect, useRef } from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
import { createChart } from 'lightweight-charts';
import { io } from 'socket.io-client';

function Chart() {
    const log = console.log;
    const chartContainerRef = useRef();
    const { id } = useParams();
    const apiKey = '25ca7054dadd9e35a37e8f89105fb2db'
    var areaSeries = null;

    useEffect(() => {
        const chart = createChart(chartContainerRef.current, {
            width: chartContainerRef.current.clientWidth,
            height: 300,
            layout: {
              background: {
                type: 'solid',
                color: 'transparent'
              }
            }
        });
        chart.priceScale('right').applyOptions({
          borderVisible: false,
        })
        areaSeries = chart.addAreaSeries({
          lineColor: '#2962ff',
          topColor: '#2962ff',
          bottomColor: 'rgba(41, 98, 255, 0.28)',
          lastPriceAnimation: true
        });
        fetch(
        `https://financialmodelingprep.com/api/v3/historical-price-full/${id}?apikey=${apiKey}`
        )
        .then((res) => res.json())
        .then((getData) => getData["historical"])
        .then((data) => {
            var dps = [];
            for (var i = data.length-1; i > 0; i--) {
              dps.push({
                value: data[i].close,
                time: data[i].date,
            })};
            areaSeries.setData(dps);
            }).catch((err) => log(err));

    }, []);

    const socket = io.connect('http://127.0.0.1:8080/prices');
    
    socket.on('stocks',(res)=>{
      const response = res['data'];
      response.forEach((element, index, array) => {
        if (element.symbol == id) {
          const tickValues = [{
            value: element.price,
            time: (Date.now() / 1000),
          }];
          areaSeries?.update(tickValues[0]);
        }
      });
    }
    );
  
    return (
      <div>
      <div ref={chartContainerRef}></div>
      </div>
    );
  }

  export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='symbol/:id' element={<Chart />} />
            </Routes>
        </BrowserRouter>
    );
}

Any ideas are appreciated.