not worked let try another way, i think its better we try to add new random data to dataSets array inside LineChart componnet and update the chart, please becareful we don't want entire componet be re-render , this is code of LineChart component now:
```
// import React, { useRef, useEffect } from 'react';
// import * as d3 from 'd3';

// interface LineChartProps {
//   width: number;
//   height: number;
//   dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
// }

// const LineChart: React.FC<LineChartProps> = ({ width, height, dataSets }) => {
//   const svgRef = useRef<SVGSVGElement | null>(null);

//   useEffect(() => {
//     const svg = d3.select(svgRef.current as SVGSVGElement);

//     svg
//       .attr('width', width)
//       .attr('height', height)
//       .style('overflow', 'visible')
//       .style('margin-top', '20px');

//     const margin = { top: 20, right: 30, bottom: 30, left: 40 };
//     const chartWidth = width - margin.left - margin.right;
//     const chartHeight = height - margin.top - margin.bottom;

//     const g = svg
//       .append('g')
//       .attr('transform', `translate(${margin.left},${margin.top})`);

//     const xScale = d3
//       .scaleLinear()
//       .domain([0, d3.max(dataSets.flatMap(set => set.data.map(d => d.x)))!])
//       .range([0, chartWidth]);

//     const yScale = d3
//       .scaleLinear()
//       .domain([0, d3.max(dataSets.flatMap(set => set.data.map(d => d.y)))!])
//       .range([chartHeight, 0]);

//     const xAxis = d3.axisBottom(xScale);
//     const yAxis = d3.axisLeft(yScale);

//     const xAx = g.append('g').attr('transform', `translate(0,${chartHeight})`);
//     const yAx = g.append('g');

//     xAx.call(xAxis);
//     yAx.call(yAxis);

//     const lineGenerator = d3
//       .line<{ x: number; y: number }>()
//       .x(d => xScale(d.x))
//       .y(d => yScale(d.y));

//     dataSets.forEach((set, index) => {
//       g.append('path')
//         .datum(set.data)
//         .attr('fill', 'none')
//         .attr('stroke', d3.schemeCategory10[index % 10])
//         .attr('d', lineGenerator as any);
//     });

//     const zoomBehavior = d3.zoom<SVGSVGElement, unknown>().on('zoom', handleZoom);

//     svg.call(zoomBehavior);

//     function handleZoom(event: any) {
//       const transform = event.transform;
//       const zx = transform.rescaleX(xScale);
//       const zy = transform.rescaleY(yScale);

//       xAx.call(xAxis.scale(zx));
//       yAx.call(yAxis.scale(zy));

//       dataSets.forEach((set, index) => {
//         g.select(`path:nth-child(${index + 1})`)
//           .datum(set.data)
//           .attr('d', d3.line<{ x: number; y: number }>()
//             .x(d => zx(d.x))
//             .y(d => zy(d.y)) as any);
//       });
//     }
//   }, [dataSets, width, height]);

//   return <svg ref={svgRef}></svg>;
// };

// export default LineChart;
//---------------------------------------------------
// import React, { useRef, useEffect } from 'react';
// import * as d3 from 'd3';

// interface LineChartProps {
//   width: number;
//   height: number;
//   dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
// }

// const LineChart: React.FC<LineChartProps> = ({ width, height, dataSets }) => {
//   const svgRef = useRef<SVGSVGElement | null>(null);

//   useEffect(() => {
//     if (!svgRef.current) return;

//     const margin = { top: 20, right: 30, bottom: 50, left: 50 };
//     const chartWidth = width - margin.left - margin.right;
//     const chartHeight = height - margin.top - margin.bottom;

//     d3.select(svgRef.current).selectAll('*').remove();

//     const svg = d3.select<SVGSVGElement, unknown>(svgRef.current)
//       .attr('width', width)
//       .attr('height', height)
//       .attr('viewBox', `0 0 ${width} ${height}`)
//       .attr('preserveAspectRatio', 'xMidYMid meet');

//     const defs = svg.append('defs');

//     defs.append('clipPath')
//       .attr('id', 'chartAreaClip')
//       .append('rect')
//       .attr('width', chartWidth)
//       .attr('height', chartHeight);

//     const g = svg.append('g')
//       .attr('transform', `translate(${margin.left},${margin.top})`);

//     const xMax = Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.x)), 1);
//     const yMax = Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.y)), 1);

//     const xScale = d3.scaleLinear().domain([0, xMax]).range([0, chartWidth]);
//     const yScale = d3.scaleLinear().domain([0, yMax]).range([chartHeight, 0]);

//     const xAxis = d3.axisBottom(xScale).ticks(10);
//     const yAxis = d3.axisLeft(yScale).ticks(10);

//     const xAxisGroup = g.append('g')
//       .attr('class', 'x-axis')
//       .attr('transform', `translate(0,${chartHeight})`)
//       .call(xAxis);

//     const yAxisGroup = g.append('g')
//       .attr('class', 'y-axis')
//       .call(yAxis);

//     // Add grid lines
//     const xGridGroup = g.append('g')
//       .attr('class', 'x-grid')
//       .attr('transform', `translate(0,${chartHeight})`);

//     const yGridGroup = g.append('g')
//       .attr('class', 'y-grid');

//     svg.append('text')
//       .attr('class', 'x-axis-label')
//       .attr('text-anchor', 'middle')
//       .attr('x', width / 2)
//       .attr('y', height - 10)
//       .text('X Axis');

//     svg.append('text')
//       .attr('class', 'y-axis-label')
//       .attr('text-anchor', 'middle')
//       .attr('transform', `translate(15, ${height / 2})rotate(-90)`)
//       .text('Y Axis');

//     const chartArea = g.append('g')
//       .attr('clip-path', 'url(#chartAreaClip)');

//     const lineGenerator = d3.line<{ x: number; y: number }>()
//       .x(d => xScale(d.x))
//       .y(d => yScale(d.y));

//     const colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10);

//     chartArea.selectAll<SVGPathElement, { name: string; data: any }>('.line')
//       .data(dataSets)
//       .join('path')
//       .attr('class', 'line')
//       .attr('fill', 'none')
//       .attr('stroke', (d, i) => colorScale(i))
//       .attr('stroke-width', 2)
//       .attr('d', d => lineGenerator(d.data) || '');

//     const zoom = d3.zoom<SVGSVGElement, unknown>()
//       .scaleExtent([0.5, 10])
//       .on('zoom', (event) => {
//         const newXScale = event.transform.rescaleX(xScale);
//         const newYScale = event.transform.rescaleY(yScale);

//         // Update axes
//         xAxisGroup.call(d3.axisBottom(newXScale) as any);
//         yAxisGroup.call(d3.axisLeft(newYScale) as any);

//         // Update grid lines using new scales
//         xGridGroup.call(
//           d3.axisBottom(newXScale)
//             .tickSize(-chartHeight)
//             .tickFormat(() => '') as any
//         );

//         yGridGroup.call(
//           d3.axisLeft(newYScale)
//             .tickSize(-chartWidth)
//             .tickFormat(() => '') as any
//         );

//         xGridGroup.selectAll('line')
//           .style('stroke', '#e0e0e0')
//           .style('opacity', 0.5);

//         yGridGroup.selectAll('line')
//           .style('stroke', '#e0e0e0')
//           .style('opacity', 0.5);

//         const updatedLineGenerator = d3.line<{ x: number; y: number }>()
//           .x(d => newXScale(d.x))
//           .y(d => newYScale(d.y));

//         chartArea.selectAll<SVGPathElement, { name: string; data: any }>('.line')
//           .attr('d', d => updatedLineGenerator(d.data) || '');
//       });

//     svg.call(zoom);

//   }, [dataSets, width, height]);

//   return <svg ref={svgRef}></svg>;
// };

// export default LineChart;
//-----------------------------------------------------
// import React, { useRef, useEffect } from 'react';
// import * as d3 from 'd3';

// interface LineChartProps {
//   width: number;
//   height: number;
//   dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
// }

// const LineChart: React.FC<LineChartProps> = ({ width, height, dataSets }) => {
//   const svgRef = useRef<SVGSVGElement | null>(null);
//   console.log('componetn re-render')
//   useEffect(() => {
//     if (!svgRef.current) return;

//     const margin = { top: 20, right: 30, bottom: 50, left: 50 };
//     const chartWidth = width - margin.left - margin.right;
//     const chartHeight = height - margin.top - margin.bottom;

//     d3.select(svgRef.current).selectAll('*').remove();

//     const svg = d3.select<SVGSVGElement, unknown>(svgRef.current)
//       .attr('width', width)
//       .attr('height', height)
//       .attr('viewBox', `0 0 ${width} ${height}`);

//     const defs = svg.append('defs');

//     defs.append('clipPath')
//       .attr('id', 'chartAreaClip')
//       .append('rect')
//       .attr('width', chartWidth)
//       .attr('height', chartHeight);

//     const g = svg.append('g')
//       .attr('transform', `translate(${margin.left},${margin.top})`);

//     const xMax = Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.x)), 1);
//     const yMax = Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.y)), 1);

//     const xScale = d3.scaleLinear().domain([0, xMax]).range([0, chartWidth]);
//     const yScale = d3.scaleLinear().domain([0, yMax]).range([chartHeight, 0]);

//     const xAxis = d3.axisBottom(xScale).ticks(10);
//     const yAxis = d3.axisLeft(yScale).ticks(10);

//     const xAxisGroup = g.append('g')
//       .attr('class', 'x-axis')
//       .attr('transform', `translate(0,${chartHeight})`)
//       .call(xAxis);

//     const yAxisGroup = g.append('g')
//       .attr('class', 'y-axis')
//       .call(yAxis);

//     // Initialize grid lines
//     const xGridGroup = g.append('g')
//       .attr('class', 'x-grid')
//       .attr('transform', `translate(0,${chartHeight})`)
//       .attr("stroke-opacity", 0.1)
//       .call(
//         d3.axisBottom(xScale)
//           .tickSize(-chartHeight)
//           .tickFormat(() => '') as any
//       )

//     const yGridGroup = g.append('g')
//       .attr('class', 'y-grid')
//       .attr("stroke-opacity", 0.1)
//       .call(
//         d3.axisLeft(yScale)
//           .tickSize(-chartWidth)
//           .tickFormat(() => '') as any
//       )

//     svg.append('text')
//       .attr('class', 'x-axis-label')
//       .attr('text-anchor', 'middle')
//       .attr('x', width / 2)
//       .attr('y', height - 10)
//       .text('X Axis');

//     svg.append('text')
//       .attr('class', 'y-axis-label')
//       .attr('text-anchor', 'middle')
//       .attr('transform', `translate(15, ${height / 2})rotate(-90)`)
//       .text('Y Axis');

//     const chartArea = g.append('g')
//       .attr('clip-path', 'url(#chartAreaClip)');

//     const lineGenerator = d3.line<{ x: number; y: number }>()
//       .x(d => xScale(d.x))
//       .y(d => yScale(d.y));

//     const colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10);

//     chartArea.selectAll<SVGPathElement, { name: string; data: any }>('.line')
//       .data(dataSets)
//       .join('path')
//       .attr('class', 'line')
//       .attr('fill', 'none')
//       .attr('stroke', (d, i) => colorScale(i))
//       .attr('stroke-width', 2)
//       .attr('d', d => lineGenerator(d.data) || '');

//     const zoom = d3.zoom<SVGSVGElement, unknown>()
//       .scaleExtent([0.5, 10])
//       .on('zoom', (event) => {
//         const newXScale = event.transform.rescaleX(xScale);
//         const newYScale = event.transform.rescaleY(yScale);

//         // Update axes
//         xAxisGroup.call(d3.axisBottom(newXScale) as any);
//         yAxisGroup.call(d3.axisLeft(newYScale) as any);

//         // Update grid lines dynamically with new scales
//         xGridGroup.call(
//           d3.axisBottom(newXScale)
//             .tickSize(-chartHeight)
//             .tickFormat(() => '') as any
//         )

//         yGridGroup.call(
//           d3.axisLeft(newYScale)
//             .tickSize(-chartWidth)
//             .tickFormat(() => '') as any
//         )

//         const updatedLineGenerator = d3.line<{ x: number; y: number }>()
//           .x(d => newXScale(d.x))
//           .y(d => newYScale(d.y));

//         chartArea.selectAll<SVGPathElement, { name: string; data: any }>('.line')
//           .attr('d', d => updatedLineGenerator(d.data) || '');
//       });

//     svg.call(zoom);

//   }, [dataSets, width, height]);

//   return <svg ref={svgRef}></svg>;
// };

// export default LineChart;
//-----------------------------------
// import React, { useRef, useEffect } from 'react';
// import * as d3 from 'd3';

// interface LineChartProps {
//   width: number;
//   height: number;
//   dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
// }

// const LineChart: React.FC<LineChartProps> = ({ width, height, dataSets }) => {
//   const svgRef = useRef<SVGSVGElement | null>(null);
//   const zoomTransformRef = useRef<d3.ZoomTransform>(d3.zoomIdentity);
//     console.log('re-render')
//   useEffect(() => {
//     if (!svgRef.current) return;

//     const margin = { top: 20, right: 30, bottom: 50, left: 50 };
//     const chartWidth = width - margin.left - margin.right;
//     const chartHeight = height - margin.top - margin.bottom;

//     // Clear existing svg
//     const svg = d3.select(svgRef.current).selectAll("*").remove().node();

//     const svgElement = d3.select(svgRef.current)
//       .attr('width', width)
//       .attr('height', height);

//     const defs = svgElement.append('defs');
//     defs.append('clipPath')
//       .attr('id', 'chartAreaClip')
//       .append('rect')
//       .attr('width', chartWidth)
//       .attr('height', chartHeight);

//     const g = svgElement.append('g')
//       .attr('transform', `translate(${margin.left},${margin.top})`);

//     const xScale = d3.scaleLinear()
//       .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.x))) || 1])
//       .range([0, chartWidth]);

//     const yScale = d3.scaleLinear()
//       .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.y))) || 1])
//       .range([chartHeight, 0]);

//     const xAxis = d3.axisBottom(xScale).ticks(10);
//     const yAxis = d3.axisLeft(yScale).ticks(10);

//     const xAxisGroup = g.append('g')
//       .attr('class', 'x-axis')
//       .attr('transform', `translate(0,${chartHeight})`)
//       .call(xAxis);

//     const yAxisGroup = g.append('g')
//       .attr('class', 'y-axis')
//       .call(yAxis);

//     const xGridGroup = g.append('g')
//       .attr('class', 'x-grid')
//       .attr('transform', `translate(0,${chartHeight})`);

//     const yGridGroup = g.append('g')
//       .attr('class', 'y-grid');

//     const chartArea = g.append('g')
//       .attr('clip-path', 'url(#chartAreaClip)');

//     const colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10);

//     const renderChart = (xScale: d3.ScaleLinear<number, number>, yScale: d3.ScaleLinear<number, number>, transform: d3.ZoomTransform) => {
//       const transformedX = transform.rescaleX(xScale);
//       const transformedY = transform.rescaleY(yScale);

//       // Render lines
//       chartArea.selectAll('.line')
//         .data(dataSets)
//         .join('path')
//         .attr('class', 'line')
//         .attr('fill', 'none')
//         .attr('stroke', (d, i) => colorScale(i))
//         .attr('stroke-width', 2)
//         .attr('d', d => d3.line<{ x: number; y: number }>()
//           .x(d => transformedX(d.x))
//           .y(d => transformedY(d.y))(d.data) || '');

//       // Render grids
//       xGridGroup.call(
//         d3.axisBottom(transformedX)
//           .tickSize(-chartHeight)
//           .tickFormat(() => '') as any
//       ).selectAll('line')
//       .style('stroke', '#e0e0e0')

//       yGridGroup.call(
//         d3.axisLeft(transformedY)
//           .tickSize(-chartWidth)
//           .tickFormat(() => '') as any
//       ).selectAll('line')
//       .style('stroke', '#e0e0e0')
//     };

//     const zoom = d3.zoom<SVGSVGElement, unknown>()
//       .scaleExtent([0.5, 10])
//       .on('zoom', (event) => {
//         zoomTransformRef.current = event.transform;
//         renderChart(xScale, yScale, event.transform);
//       });

//     svgElement.call(zoom);

//     // Initial render with persisted zoom transform if available
//     renderChart(xScale, yScale, zoomTransformRef.current);

//   }, [dataSets, width, height]);

//   return <svg ref={svgRef}></svg>;
// };

// export default LineChart;
// -----------------------------------

import React from 'react';
import * as d3 from 'd3';

interface LineChartProps {
  width: number;
  height: number;
  dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
}

class LineChart extends React.Component<LineChartProps> {
  private svgRef: React.RefObject<SVGSVGElement>;
  private zoomTransform: d3.ZoomTransform = d3.zoomIdentity;

  constructor(props: LineChartProps) {
    super(props);
    this.svgRef = React.createRef();
  }

  componentDidMount() {
    this.createChart();
  }

  shouldComponentUpdate(nextProps: LineChartProps, nextState: Readonly<{}>) {
    if (nextProps.dataSets !== this.props.dataSets) {
      this.updateChart();
      return false; // Don't re-render the component
    }
    return true; // Re-render the component for other prop changes
  }

  componentDidUpdate(prevProps: LineChartProps) {
    if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
      this.createChart();
    } else {
      this.updateChart();
    }
  }

  createChart() {
    if (!this.svgRef.current) return;

    const { width, height } = this.props;
    const margin = { top: 20, right: 30, bottom: 50, left: 50 };
    const chartWidth = width - margin.left - margin.right;
    const chartHeight = height - margin.top - margin.bottom;

    const svgElement = d3.select<SVGSVGElement, unknown>(this.svgRef.current)
      .attr('width', width)
      .attr('height', height);

    const defs = svgElement.append('defs');
    defs.append('clipPath')
      .attr('id', 'chartAreaClip')
      .append('rect')
      .attr('width', chartWidth)
      .attr('height', chartHeight);

    const g = svgElement.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    g.append('g')
      .attr('class', 'x-axis')
      .attr('transform', `translate(0,${chartHeight})`);

    g.append('g')
      .attr('class', 'y-axis');

    g.append('g')
      .attr('class', 'x-grid')
      .attr('transform', `translate(0,${chartHeight})`);

    g.append('g')
      .attr('class', 'y-grid');

    g.append('g')
      .attr('clip-path', 'url(#chartAreaClip)')
      .attr('class', 'chart-area');

    const zoom = d3.zoom<SVGSVGElement, unknown>()
      .scaleExtent([0.5, 10])
      .on('zoom', (event) => {
        this.zoomTransform = event.transform;
        this.updateChart();
      });

    svgElement.call(zoom);

    this.updateChart();
  }

  updateChart() {
    if (!this.svgRef.current) return;

    const { width, height, dataSets } = this.props;
    const margin = { top: 20, right: 30, bottom: 50, left: 50 };
    const chartWidth = width - margin.left - margin.right;
    const chartHeight = height - margin.top - margin.bottom;

    const xScale = d3.scaleLinear()
      .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.x))) || 1])
      .range([0, chartWidth]);

    const yScale = d3.scaleLinear()
      .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.y))) || 1])
      .range([chartHeight, 0]);

    const svgElement = d3.select<SVGSVGElement, unknown>(this.svgRef.current);
    const transformedX = this.zoomTransform.rescaleX(xScale);
    const transformedY = this.zoomTransform.rescaleY(yScale);

    const colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10);

    svgElement.select<SVGGElement>('.x-axis')
      .call(d3.axisBottom(transformedX).ticks(10) as any);

    svgElement.select<SVGGElement>('.y-axis')
      .call(d3.axisLeft(transformedY).ticks(10) as any);

    svgElement.select<SVGGElement>('.x-grid')
      .call(d3.axisBottom(transformedX).tickSize(-chartHeight).tickFormat(() => '') as any)
      .selectAll('line')
      .style('stroke', '#e0e0e0');

    svgElement.select<SVGGElement>('.y-grid')
      .call(d3.axisLeft(transformedY).tickSize(-chartWidth).tickFormat(() => '') as any)
      .selectAll('line')
      .style('stroke', '#e0e0e0');

    svgElement.select('.chart-area')
      .selectAll('.line')
      .data(dataSets)
      .join('path')
      .attr('class', 'line')
      .attr('fill', 'none')
      .attr('stroke', (d, i) => colorScale(i))
      .attr('stroke-width', 2)
      .attr('d', d => d3.line<{ x: number; y: number }>()
        .x(d => transformedX(d.x))
        .y(d => transformedY(d.y))(d.data) || '');
  }

  render() {
     console.log('re-render'); // Add this line
    console.log('re-render')
    return <svg ref={this.svgRef}></svg>;
  }
}

export default LineChart;
```