Why the status is returned as success even the url is wrong?

[DamengRandom]

Can someone answer this question?

import { useQuery } from "react-query";

function App() {
  const fetchData = async () => {
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/twodos"); // correct url is todos not twodos
      const json = await response.json();
      return json;
    } catch (error) {
      return error;
    }
  }

  const { error, status } = useQuery("users", fetchData);

  console.log( error, status); // why status returns as 'success'?

  return (
    <>
      <h2>Basic Query Example</h2>
      <div>
        {status === "error" && <div>Error now ....</div>}

        {status === "loading" && <div>Loading...</div>}

        {status === "success" && <p>Did it!!!</p>}
      </div>
    </>
  );
}

export default App;

I expect the status should give me error instead success, right? because we get this error message:

GET https://jsonplaceholder.typicode.com/twodos 404

[DamengRandom]

Sorry, I found the answer:

const response = await fetch('https://jsonplaceholder.typicode.com/twodos');
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json()