Reactjs – Why fetch function is being called twice on component load in react?

I have hook which fetched the first 10 posts from jsonplaceholder site.
i can see in network tab that fetch req is being called twice.
i have used useEffect, useCallback & useState hook from react

import { useCallback, useEffect, useState } from 'react'

const useAppHook = ({ ref }) => {
  const [posts, setPosts] = useState([])
  const [start, setStart] = useState(0)

  const fetchPosts = useCallback(async () => {
    const postFetchUrl = `https://jsonplaceholder.typicode.com/posts?_start=${start}&_limit=10`
    const response = await fetch(postFetchUrl)
    const postExtracted = await response.json()
    if (postExtracted.length) {
      setPosts((current) => [...current, ...postExtracted])
    }
  }, [start])

  useEffect(() => {
    fetchPosts()
  }, [fetchPosts])

  const handlePagination = () => {
    setStart((current) => current + 10)
  }

  return {
    posts,
    handlePagination,
  }
}

export default useAppHook

fetch req should happen once