Above is the output I am getting for my code, if you can see the y-axis, my inner tick labels, and outer tick labels are overlapping. Here is my code to define the axis.

const strAxis = () => {
  gRef.current &&
    select(gRef.current)
    .call(
      axisLeft(props.scale)
      .tickSize(tickSize)
      //.ticks(3)
      .tickSizeInner(wd) //Grid
      //.tickSizeOuter(12)
    )
    .append('g')
    .attr("class", "yAxis")
    .call(axisLeft(props.scale))
    //.style("stroke", "#eee")
    .call(
      (g) =>
      g
      .selectAll(".tick text")
      //.append('g')
      .style("stroke", props.textColor)
      .style("font-size", props.tickFontSize || "12px")
      .style("margin-left", "50px")
    )


};