Error horizontal bar assign value 0 to d3

Question

Structure value I used is array of an object chart data = {name: string, value: number}. Every time I put 0 value to the array causing error below. It seems d3 do not allow me to add 0 value to the chart.
Even I comment the select(.tick) still throwing this error. Here I am using Typescript and React.

Uncaught TypeError: Cannot read properties of undefined (reading 'ticks').

interface LineChart {
  width: number;
  height: number;
  data: ChartDataHorizontal[];
  color: string;
  indexPoint?: number;
  maxLine?: number;
  minLine?: number;
  yMaxDomain?: (max: number) => number;
}

const BarChartHorizontal: React.VFC<LineChart> = (props) => {
  const {
    width: widthSVG,
    height: heightSVG,
    data: dataLineChart,
    color: chartColor,
  } = props;

  const chartRef = useRef<SVGSVGElement | null>(null);

  const margin = {
    top: 20,
    right: 30,
    bottom: 20,
    left: 80,
  };

  const width = widthSVG - margin.left - margin.right;
  const height = heightSVG - margin.top - margin.bottom;

  const maxCount = max(dataLineChart, (d) => d.value);
  const minCount = min(dataLineChart, (d) => d.value);

  let xScale, yScale;
  if (maxCount && minCount) {
    xScale = scaleLinear()
      .range([0, width])
      .domain([0, maxCount + 6]);
  }

  yScale = scaleBand()
    .range([height, 0])
    .domain(dataLineChart.map((d) => d.name))
    .padding(0.6);

  useEffect(() => {
    select(chartRef.current).selectAll('g').remove();
    const svg = select(chartRef.current)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
      .attr('fill', '#d5d5d5');

    // left axis
    const tickVertical = svg
      .append('g')
      .attr('transform', `translate(0, 0)`)
      .call(axisLeft(yScale))
      .selectAll('.tick');

    // bottom axis
    const tickHorizontal = svg
      .append('g')
      .attr('transform', `translate(0, ${height})`)
      .call(axisBottom(xScale))
      .selectAll('.tick');

    tickVertical.selectAll('text').attr('fill', '#A1A1A1');
    tickVertical.selectAll('line').remove();

    tickHorizontal.selectAll('text').attr('fill', '#A1A1A1');
    tickHorizontal.selectAll('line').remove();
    tickHorizontal
      .append('line')
      .attr('x1', 0)
      .attr('x2', 0)
      .attr('y1', 0)
      .attr('y2', -height)
      .attr('stroke', '#A1A1A1')
      .attr('stroke-width', '0.4px');

    svg
      .append('g')
      .attr('class', 'rect-group')
      .selectAll('rect')
      .data(dataLineChart)
      .enter()
      .append('rect')
      .attr('x', 0)
      .attr('rx', 5)
      .attr('ry', 1)
      .attr('height', yScale.bandwidth())
      .attr('y', (d) => yScale(d.name))
      .attr('width', (d) => xScale(d.value))
      .attr('fill', chartColor)
      .on('mouseover', (element) =>
        select(element.currentTarget).attr('fill', '#656565'),
      )
      .on('mouseout', (element) =>
        select(element.currentTarget).attr('fill', chartColor),
      );

    svg.selectAll('.tick').selectAll('text').attr('fill', '#A1A1A1');
    svg.selectAll('.domain').style('stroke', '#A1A1A1');

    return () => {
      svg.selectAll('*').remove();
    };
  }, [props]);

  return (
    <svg
      ref={chartRef}
      viewBox={`0 0 ${widthSVG} ${heightSVG}`}
      height="350px"
      width="100%"
      preserveAspectRatio="none"
    />
  );
};

export default BarChartHorizontal;