Не могу из fetch обратиться к функции в классе JS REACT

Question

пользователи. Мне необходимо изменять текст отображенный после рендера React компонента. Вопросов с обычными цифрами и строками не возникает, но дело дошло до массива. Начал использовать state внутри компонента, и снова вылетала ошибка. Из текста ошибки в консоли пологаю что код не может вызвать функцию, изменяющую state.

Кусок исходника где всё умирает:

class UserStats extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ActiveTab: "profile",
      topOrders: null,
    };
    this.changeTop = this.changeTop.bind(this);
  }
changeTop = (item) => {
    console.log(item);
    this.setState({
      topOrders: item,
    });
  };
render() {
    const { topOrders } = this.state;
    return (
      <Card>
        <Card.Body className="text-center">
          <Card.Title>Ваша статистика</Card.Title>
          <Card.Text>
            <InputGroup className="mb-3">
              <Form.Control type="date" id="start_date" />
              <Form.Control type="date" id="end_date" />
              <Button
                variant="outline-secondary"
                size="sm"
                id="stats-button"
                onClick={function handleClick() {
                  var btn = document.getElementById("stats-button");
                  btn.setAttribute("disabled", "disabled");
                  var sdate = document.getElementById("start_date").value;
                  var edate = document.getElementById("end_date").value;
                  fetch("http://localhost:5000/api/v1/stats/", {
                    method: "POST",
                    headers: {
                      Accept: "application/json",
                      "Content-Type": "application/json; charset=UTF-8",
                    },
                    body: JSON.stringify({
                      id: localStorage.getItem("userid"),
                      start_date: sdate,
                      end_date: edate,
                    }),
                  }).then((res) => {
                    fetch(
                      "http://localhost:5000/api/v1/stats/?start_date=" +
                        sdate +
                        "&end_date=" +
                        edate +
                        "&id=" +
                        localStorage.getItem("userid")
                    )
                      .then((res) => res.json())
                      .then((result) => {
                        if (!result.succes) {
                          alert("Произошла ошибка\n" + result.message);
                          return;
                        }
                        document.getElementById("buysValue").textContent =
                          result.data.orders + " шт";
                        document.getElementById("buysSumm").textContent =
                          result.data.ordersMoney + "₽";
                        document.getElementById("ordersValue").textContent =
                          result.data.buys + " шт";
                        document.getElementById("ordersSumm").textContent =
                          result.data.buysMoney + "₽";
                        const listItems = result.data.topOrders.map((item) => (
                          <Row>
                            item
                            {/* {item.map((nm, val) => (
                              <>
                                <Col>{nm}</Col>
                                <Col>{val}</Col>
                              </>
                            ))} */}
                          </Row>
                        ));
                        // changeTop(<>{listItems}</>);
                        // this.changeTop(listItems);
                        this.changeTop(<Row>123</Row>);
                      });
                  });
              btn.removeAttribute("disabled");
            }}
          &gt;</code></pre>

Скрин ошибки: