Постоянная перезагрузка с использованием тернарного оператора (React)

Есть код в App.js

import { useState, useEffect } from 'react';    
import PostService from './API/PostService';    
  
const [isPostsLoading, setIsPostsLoading] = useState(false)

  useEffect(() => {
    fetchPosts()
  }, [filter, posts, modal])

  async function fetchPosts() {
    setIsPostsLoading(true);
    const posts = await PostService.getAll();
    setPosts(posts);
    setIsPostsLoading(false);
  }

  {isPostsLoading
    ? <h1>Идёт загрузка...</h1>
    : <PostList remove={removePost} posts={sortedAndSearchedPosts} title="Посты про Web" />
  }

Код в PostService.js

import axios from 'axios';

export default class PostService {
    static async getAll () {
        try {
            const response = await axios.get("https://jsonplaceholder.typicode.com/posts")
            return response.data
        } catch {
            console.log('error')
        }
    }
}

Проблема заключается в том, что у меня постоянная перезагрузка страницы идёт с этим кодом. Сначала пишет <h1>Идёт загрузка...</h1>, а потом <PostList remove={removePost} posts={sortedAndSearchedPosts} title="Посты про Web" />, а потом снова через полсекунды пишет, что идёт загрузка, потом снова про посты про Web... И это всё продолжается бесконечность. Такое ощущение, что мой код автоматически перезагружает страницу...