map is not function error, when loading page and useEffect fetching data from Firebase

I get data from firebase firestore. It returns “filter is not function and error”. I think it is problem because firstly runs LoadBooks function and after birngs Data from firestore. How can i fix it? Async? I can’t write it rightly or i dont know, just can’t do, need a help please.

*here isnt error if i fetch same data from JSON file.

**// Fetch Book to Home Page List**

  const [list, setList] = useState();

  useEffect(() => {
      const data = onSnapshot(collection(db, "Books"), (snapshot) => {
        setList(snapshot.docs.map((doc) => doc.data()));
      });
      return data;
  }, []);

**//search**
  const [search, setSearch] = useState("");
  **//Category filter**
  const [filter, setFilter] = useState("all");

  function LoadBooks() {
    // search
    const book = list.filter((val) => {
      if (search === "") {
        return val;
      } else if (val.title.toLowerCase().includes(search.toLowerCase())) {
        return val;
      }
    })
      // filter and map
      .map((item) => {
        if (item.category === filter) {
          return (
            <Book key={item.id} {...item} />
          );
        } else if (filter === "all") {
          return (
            <Book key={item.id} {...item} />
          );
        }
      })
    return book;
  }

  const book = LoadBooks();