const Home =() => {
 const [posts, setPosts] = useState([]);
 const [error, setError] = useState(null); 
 const loadPosts = () => {
        getPost()
          .then((response) => {
            if (!response.ok) {
              throw Error("Server not reachable!");
            }
            return response.json();
          })
          .then((data) => {
            setPosts(data.posts);
          })
          .catch((err) => {
            setError(err.message);
          });
      };

return(
 <div>{error} </div>
)
}

i am trying to log the custom error that i have throw i.e "Server not reachable!", but for some reason i am always getting the default error log i.e fail to fetch

How can i log the custom error that i have throw instead of the default one