仅更新一个状态变量时，所有组件都会重新渲染

我有一个页面，其中显示每180秒（3分钟）从API检索到的一些数据。当页面加载时，我有一个初始的useEffect钩子来调用retrieveData（）函数。然后，使用下面的代码和一个名为elapsed的状态变量，我开始间隔180秒。每隔一秒钟，我都会更新一个进度条，该进度条从3分钟开始倒计时并显示剩余时间。这将使用经过的状态变量。

这是开始间隔的钩子：

useEffect(() => {
    const interval = setInterval(() => {
      if (elapsed < dataUpdateInterval) {
        setElapsed(elapsed + 1);
      } else {
        setElapsed(0);
        retrieveData();
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [elapsed]);

我的问题是，为什么间隔的每个刻度都会重新渲染页面上的其余组件？我以为，由于我只更新经过的状态变量，因此只有那些组件会更新使用该状态变量的组件。我显示数据的表（存储在另一个状态变量中）应该每3分钟更新一次。

如果无法提供其他信息，我们很乐意提供。

更新1：在开发工具中，我得到重新渲染的原因是“挂钩已更改”

更新2：以下是使用此计时器的代码片段。StatusList和StatusListItem组件使用React.memo并且是功能组件。状态列表是一个IonList，而StatusListItem是一个顶级IonItem（来自Ionic）

import React, { useEffect, useState } from "react";
import { Layout } from "antd";
import StatusListItemNumbered from "./StatusListItemNumbered";
import { Container, Row, Col } from "react-bootstrap";
import StatusList from "./StatusList";
import { Progress } from "antd";
import moment from "moment";

const Content = React.memo(() => {
  const dataUpdateInterval = 180;

  const [elapsed, setElapsed] = useState(0);
  const [data, setData] = useState();

  const timeLeft = (interval, elapsed) => {
    let time = moment.duration(interval - elapsed, "seconds");
    return moment.utc(time.asMilliseconds()).format("mm:ss");
  };

  const retrieveData = () => {
    console.log("Retrieving data");
    SomeApi.getData().then(items => {
        setData(items);
    })
  };

  //The effect hook responsible for the timer
  useEffect(() => {
    setTimeout(() => {
      if (elapsed < dataUpdateInterval) {
        setElapsed(elapsed + 1);
      } else {
        setElapsed(0);
        retrieveData();
      }
    }, 1000);
  }, [elapsed]);

  //Retrieve data the very first time the component loads.
  useEffect(() => {
    retrieveData();
  }, []);

  //Component styling
  return (
    <Layout.Content style={{ padding: "20px 20px" }}>
      <div className={css(styles.siteLayoutContent)}>
        <Container className={css(styles.mainContainer)}>
          <Row className={css(styles.progressRow)}>
            <Col>
              <Progress
                style={{ marginLeft: "17px", width: "99%" }}
                strokeColor={{
                  "0%": "#108ee9",
                  "100%": "#87d068",
                }}
                percent={(100 / dataUpdateInterval) * elapsed}
                format={() => `${timeLeft(dataUpdateInterval, elapsed)}`}
              />
            </Col>
          </Row>
          <Row>
            <Col sm={6}>
              <StatusList listName="Data">
                {data &&
                  data.map((item, index) => {
                    return (
                      <StatusListItemNumbered
                        key={index}
                        value={item.count}
                        label={item.company}
                      />
                    );
                  })}
              </StatusList>
            </Col>
          </Row>
        </Container>
      </div>
    </Layout.Content>
  );
});

export default Content;