react axios два раза выводит данные с сервера

Такая проблема. У меня есть код на ts react, который получает данные сервера с помощью axios. Но при получении данных с сервера в консоль браузера выводится два раза объект, который получили с сервера, но при этом во вкладке сети, он делает один запрос на сервер. Однако, если я вынесу запрос к серверу выше функции App, то выведется один раз объект в консоли браузера. В качестве сервера я использовал fakeapi.

function App() {
    async function fetchPosts() {
        const response = await axios.get<IProduct[]>(url)
        console.log(response)
    }
    useEffect(() => {
        fetchPosts()
    }, [])

  return (
    <div className="App">
        Hey
    </div>
  );
}