React component not rendering after useRef object gets updated - reactjs

Question

I have the following component which should generate a d3 bar chart and update it every 3 seconds. It receives a dataset from its parent every 3 seconds.
Right now, it generates the chart but it does not update it. I can confirm that the dataset is updated and received every 3 seconds and then useEffect is triggered.
I have tried to set intervals and replace useRef but it did not work.
Any idea? Any other way I should structure this kind of component to generate D3 elements?
Let me know if you need more info. Thanks
import React, { useRef, useEffect } from "react";
import * as d3 from "d3";
export const BarChart = ({ dataset }) => {
const ref = useRef();
useEffect(() => {
if (dataset && dataset[0].valor) {
const svgHeight = 200;
const svgWidth = 350;
const barPadding = 30;
const barWidth = svgWidth / dataset.length;
const svgElement = d3
.select(ref.current)
.attr("width", svgWidth)
.attr("height", svgHeight);
svgElement
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", d => svgHeight - d.valor - 40)
.attr("x", (d, i) => i * barWidth)
.attr("height", d => d.valor)
.attr("width", barWidth - barPadding)
.attr("fill", d => (d.valor > 47 ? "blue" : "red"));
}
}, [dataset]);
return (
<div>
<svg ref={ref} />
</div>
);
};

Answer 1

I found the solution. The issue was not related to useRef but to the d3 code that I wrote, instead of using .enter().append('rect') I should have used .join(). See below:
svgElement
.selectAll("rect")
.data(dataset)
.join("rect")
.attr("y", d => svgHeight - d.valor - 40)
.attr("x", (d, i) => i * barWidth)
.attr("height", d => d.valor)
.attr("width", barWidth - barPadding)
.attr("fill", d => (d.valor > 47 ? "blue" : "red"));
}