スクロールの一番下にいくとAPIコールを行いたい

やりたいこと

ユーザが一番下までスクロールしたときにAPIコールを行い,記事を追加する

できないこと

1回目までの１番下までスクロールはAPIコールされるが記事が追加されてその位置から再度追加分のスクロールを行い一番下で
スクロールするとAPIコールされない.コードでいうとhookからもらっているbottomが更新されない.

ご教授よろしくお願いします.

コード

import React, { useState } from "react";
import useFetch from "use-http";
import Box from "@material-ui/core/Box";
import Spiner from "@material-ui/core/CircularProgress";
import LazyLoad from "react-lazyload";
import { FadeModal } from "../components/MaterialModal";
import "react-awesome-slider/dist/styles.css";
import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";
import style from "../styles/react-awesome-slider.module.css";
import { useScrollBottom } from "../hooks/useScrollBottom";

type Image = {
  id: string;
  url: string;
  width: number;
  height: number;
  title: string;
  description: string;
  author: string;
  color: string;
  postDatetime: number;
  location: {
    lat: number;
    lng: number;
  };
};

export const Photos = () => {
  const [state, setState] = useState<Image[]>([]);
  const { get, loading } = useFetch<Image[]>(
    "https://hoge-hoge/article"
  );
  const bottom = useScrollBottom();
  React.useEffect(() => {
    const f = async () => {
      const images = await get("/article?per=10");
      const { data, ok } = images;
      if (ok) {
        setState([...state, ...data.images]);
      }
    };
    f();
  }, [get, bottom]);

  return (
    <>
      <Box
        style={{ maxWidth: "1300px", margin: "auto" }}
        className="albums"
        onScroll={() => console.log("alkjsfd")}
      >
        {state.map((v, i) => (
          <LazyLoad height={600} key={i}>
            <img src={v.url} />
          </LazyLoad>
        ))}
      </Box>
      {loading || bottom && (
          <Spiner color="primary" />
      )}
    </>
  );
};

import { useState, useEffect } from "react";

export const useScrollBottom = () => {
  const [bottom, setBottom] = useState(false);
  window.onscroll = function () {
    if (window.innerHeight + window.scrollY === document.body.offsetHeight) {
      setBottom(true);
    }
  };

  return bottom;
};