D3 Chart does not redraw on new data - reactjs

Question

Using react I draw a D3 scatter chart. When I try to add new lines on the chart through the svg i initialize at the start, it works i.e. when using the button rendered in the svg and the onlick function.
When I try to do this using the parent's props, the function to add the lines gets triggered but the lines are not added. I have read other posts about using enter() but this does not work. What I think is wrong is the way I setup the div structure to mount the original SVG, since I have a div with class chart-container and inside it a div with id chart, which I add the SVG inside. Does anyone thing the way I am selecting the svg when adding the lines is wrong? I do not understand why the lines are not rendered on the D3 chart.
import React, { useEffect, useLayoutEffect } from 'react';
import * as d3 from 'd3';
import './Chart.css';
const Chart = (props) => {
useEffect(() => {
drawChart(props.data)
}, [props.columnType]);
useLayoutEffect(() => {
if (showLines) {
addLines(props.data)
return
} else {
removeLines()
}
}, [props.showLines]);
const addLines = (data) => {
const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const parsedData = parseData(data, columnType);
parsedData.forEach((dataSet, index) => {
const { points } = dataSet;
const line = d3.line()
.x((d) => x(d.x))
.y((d) => y(d.yhat));
// If I use this selection, I cannot add the lines
d3.select("svg").enter().append("path")
.datum(points)
.attr("class", `line`)
.attr("d", line);
});
}
const drawChart = (data) => {
..... // Other code not added (related to configuring the graph)
// If I use this SVG I can add the lines
const svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "chart-svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
..... // other code not added (related to rendering the points using the data)
}
return (
<div className="chart-container">
<div id="chart"></div>
</div>
);
}

Answer 1

Figured it out. I need to reset the x and y ranges again, as it was rendering the lines off screen.