Счетчик тиков работает неверно, когда в повторных графиках используется настроенный тик?

Question

Проблема:

Я создал гистограмму, используя перерисовку.Там я установил переменную для подсчета тиков в зависимости от ширины устройства.Это работает окончательно.Но после этого я использовал индивидуальную галочку.В это время счетчик тиков работает неправильно и не начинается с 0.

Вот как я организовал свой код.

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  Card,
  CardBody,
  CardTitle,
  CardFooter,
  CardSubtitle
} from "reactstrap";
import {
  BarChart,
  Tooltip,
  Bar,
  ResponsiveContainer,
  Cell,
  XAxis,
  YAxis
} from "recharts";

import "./PopularDaysInWeek.css";
import { get_device_width } from "../../../actions";

const data = [
  {
    name: "Sun",
    uv: 12.174
  },
  {
    name: "Mon",
    uv: 13.298
  },
  {
    name: "Tue",
    uv: 13.679
  },
  {
    name: "Wed",
    uv: 12.799
  },
  {
    name: "Thu",
    uv: 11.777
  },
  {
    name: "Fri",
    uv: 11.468
  },
  {
    name: "Sat",
    uv: 11.571
  }
];

const COLORS = [
  "#d1cd70",
  "#5ab89e",
  "#26a0a7",
  "#a2da91",
  "#dfb054",
  "#ec983d",
  "#e7a145"
];

class PopularDaysInWeek extends Component {
  constructor(props) {
    super(props);

    this.getDeviceWidth = this.getDeviceWidth.bind(this);
  }

  componentDidMount() {
    this.getDeviceWidth();
    window.addEventListener("resize", this.getDeviceWidth);
    window.addEventListener("load", this.getDeviceWidth);
  }

  getDeviceWidth() {
    this.props.get_device_width();
  }

  render() {
    let yaspect = 5.35;
    let t_count = 0;
    let left = 10;
    let width = 15;
    if (this.props.device >= 1024) {
      t_count = 3;
      left = -28;
      width = 20
    }

    if (this.props.device >= 1666) {
      yaspect = 7.24;
      t_count = 4;
      left = 10;
    }
    return (
      <div>
        <Card className="popular-days-in-week-card">
          <CardTitle className="popular-days-in-week-card-title">
            Popular Days in the Week
          </CardTitle>
          <CardSubtitle className="popular-days-in-week-card-subtitle">
            Hits
          </CardSubtitle>
          <CardBody>
            <ResponsiveContainer
              width="100%"
              height="100%"
              aspect={5.0 / yaspect}
            >
              <BarChart data={data} barGap={10} margin={{ top: 5, right: 0, left: left, bottom: 0 }}>
                <Tooltip />
                <XAxis
                  dataKey="name"
                  type="category"
                  interval={0}
                  tick={<CustomizedAxisTick />}
                />
                <YAxis tick={<CustomizedYAxisTick />} tickCount={t_count} />
                <Bar dataKey="uv" fill="#8884d8"  maxBarSize={width}>
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index + 1}`} fill={COLORS[index]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
            <CardFooter className="popular-days-in-week-card-footer">
              <div>Hits in the Y-axis</div>
            </CardFooter>
          </CardBody>
        </Card>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ get_device_width }, dispatch);
}

function mapStateToProps(state) {
  return {
    device: state.device
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PopularDaysInWeek);

class CustomizedAxisTick extends Component {
  render() {
    const { x, y, payload } = this.props;

    return (
      <g transform={`translate(${x},${y})`}>
        <text
          x={0}
          y={0}
          dy={16}
          textAnchor="end"
          fill="#666"
          className="customized-axis-tick-text"
        >
          {payload.value}
        </text>
      </g>
    );
  }
}

class CustomizedYAxisTick extends Component {
  render() {
    const { x, y, payload } = this.props;

    return (
      <g transform={`translate(${x},${y})`}>
        <text x={-22} y={y-2} className="customized-y-axis-tick-text">
          {`${payload.value}M`}
        </text>
      </g>
    );
  }
}

Может ли кто-нибудь помочь мне найти решение этой проблемы ?.Я много пытался найти решение этой проблемы, ссылаясь на документацию, а также на проблемы Github, но мне не удалось найти решение, которое решает мою проблему.Спасибо.