multi line chart is been drawn at different rates and places d3

I am animating a multi line chart in d3 v5. It; comparing the mobility rate of a county in Florida with the median distance traveled for the whole state. I have successfully generated the animation and the filtering process is working as it should. The problem that I have right now is that, for the majority of the counties, the line is being drawn at a different place along the x axis. The Florida line is animated as it should all the time. The animation starts at the same time for both. What puzzles me is that, for certain options, the lines follow the expected behavior (been drawn at the beginning of my x axis). Is there a reason why this is happening?

Filter data:

function compare(county) {
// 3.1 - filter data based on select value
let countyData = data.filter(function(element) {
  return element.place === 'Florida' || element.place === county;
});

Nesting:

 countyData = d3
  .nest()
  .key(function(d) {
    return d.place;
  })
  .entries(countyData);

Draw lines after play button is clicked:

const countyLine = bounds
    .selectAll('lines')
    .data(countyData)
    .enter()
    .append('path')
    .attr('fill', 'none')
    .attr('class', 'chartLine')
    .attr('stroke', function(d) {
      if (d.key === 'Florida') {
        return '#00796b';
      }
      return '#fbc02d';
    })
    .attr('stroke-width', function(d) {
      if (d.key === 'Florida') {
        return '1';
      }
      return '2';
    })
    .attr('d', function(d) {
      return d3
        .line()
        .x(function(d) {
          return xScale(d.date);
        })
        .y(function(d) {
          return yScale(d.percent_change);
        })(d.values);
    });

  const totalLength = countyLine.node().getTotalLength();

  // Set Properties of Dash Array and Dash Offset and initiate Transition
  countyLine
    .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
    .attr('stroke-dashoffset', totalLength)
    .transition()
    .delay(2000)
    .duration(7000)
    .ease(d3.easeLinear)
    .attr('stroke-dashoffset', 0);

First I update my y axis and delay the lines animation for 2 seconds.

Any help with this will be extremely appreciated! Thanks in advance :)