Компонент постоянно переобнавляется

Мой компонент с таймаутом в 5 секунд постоянно переобнавляется

export const getApiResource = () => {
  const page = useSelector((state) => state.page);
  return function (dispatch) {
    fetch(`https://swapi.dev/api/people/?page=${page.page}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        dispatch(addPageDataAction(data));
      });
  };
};

const People = () => {
  const dispatch = useDispatch();
  const pageData = useSelector((state) => state.pageData.pageData);
  const editPagePlus = () => {
    dispatch(editPagePlusAction());
  };
  dispatch(getApiResource());
  console.log(pageData);
  return (
    <div>
      <div className="buttons">
        <button>Previous</button>
        <button onClick={() => editPagePlus()}>Next</button>
      </div>
      <div>
        {/* {pageLoadVar == true ? (
          pageData.map((pag) => <div>{pag.results.name}</div>)
        ) : (
          <div>No info</div>
        )} */}
        {pageData.map((pag) => (
          <div>{pag.results.name}</div>
        ))}
      </div>
    </div>
  );
};

из за этого получаю вот такой результат: