hi, i have a project with react and typescript, I create a functional component to show some data on a d3 chart , but I have a problem with that component , this the code of component::
```
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;
```
and this is how I pass data to that component:
```
import React, { useState, useEffect } from 'react';
import LineChart from './components/LineChart';

const App: React.FC = () => {
  const [dataSets, setDataSets] = useState([
    {
      name: 'Dataset 1',
      data: [
        { x: 1, y: 3 },
        { x: 2, y: 7 },
        { x: 3, y: 2 },
        { x: 4, y: 5 }
      ]
    },
    {
      name: 'Dataset 2',
      data: [
        { x: 1, y: 4 },
        { x: 2, y: 6 },
        { x: 3, y: 3 },
        { x: 4, y: 8 }
      ]
    }
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      setDataSets(prevDataSets => prevDataSets.map(dataset => ({
        ...dataset,
        data: dataset.data.map(point => ({
          x: point.x,
          y: Math.floor(Math.random() * 10) + 1
        }))
      })));
    }, 1000); // Update every 2 seconds

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App" style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
      <h1>Line Chart with D3 and React</h1>
      <LineChart width={800} height={400} dataSets={dataSets} />
    </div>
  );
};

export default App;
```
so the problem I have is when data change my entire component re-render I don't want that I just want the d3 chart data be update , and I try so many thing and nothing work so please turn my component to a class component and do something to avoid re-rendering component when data change or update, please be careful don't changing my grid or zooming or panning features