title: d3 tween only applied for the last element issue - React
body: <p>I have a bar chart developed using d3 and react. In <code>BarChart.js</code> I have the following code</p>
  <pre><code> {data.map((item) =&gt; (
              &lt;RectEl
                key={item.id}
                id={item.id}
                x={xScale(item.country) || 0}
                y={yScale(item.population)}
                width={xScale.bandwidth()}
                height={innerHeight - yScale(item.population)}
                deleteBar={deleteBar}
                innerHeight={innerHeight}
              /&gt;
            ))}
  </code></pre>
  <p>and <code>RectEl.js</code></p>
  <pre><code>import React from 'react';
  import useTween from '../hooks/tween';
  
  const RectEl = ({
    x,
    y,
    width,
    height,
    id,
    deleteBar,
    innerHeight,
  }) =&gt; {
    const xTween = useTween(0, x);
  
  
    return (
      &lt;rect
        x={xTween}
        y={y}
        width={width}
        height={height}
        onClick={() =&gt; deleteBar(id)}
      /&gt;
    );
  };
  
  export default RectEl;
  </code></pre>
  <p>where <code>useTween</code> is a custom hook</p>
  <pre><code>import { useEffect, useRef, useState } from 'react';
  import { selection } from 'd3';
  import { interpolate } from 'd3-interpolate';
  
  const useTween = (initialValue, finalValue) =&gt; {
    const valueRef = useRef(initialValue);
    const [value, setValue] = useState(valueRef.current);
  
  
  
    useEffect(() =&gt; {
      selection()
        .transition()
        .duration(1000)
        .tween(&quot;tween&quot;, function () {
          const interValue = interpolate(valueRef.current, finalValue);
          return (t) =&gt; {
            valueRef.current = interValue(t);
            setValue(interValue(t));
          };
        });
    }, [finalValue]);
  
    return value;
  };
  
  export default useTween;
  
  </code></pre>
  <p>The issue I have</p>
  <ul>
  <li>The tween function is applied only for the last element, and not to each element individually.</li>
  </ul>
  <p>Is it possible to fix this issue? and how?</p>