Javascript – Fetch api error throwing cannot be caught

I’m developing a react app. I’m trying to catch an error and bubble it up to my ErrorBoundary component. The ErrorBoundary component is the direct parent of the component where I’m sending the request. I’ve tested throwing a random error just to test if the ErrorBoundary would catch it and it does, everything works fine. The problem arises with the fetch request, I can’t seem to catch the error. This is the code:

const onSubmit = async (data) => {
const eventData = {
  firstName: data.firstName,
  lastName: data.lastName,
  username: data.username,
  email: data.email,
  password: data.password,
};

try {
  const response = await fetch(
    "https://localhost:7182/api/v1/users/create",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(eventData),
    }
  );

  if (!response.ok) {
    const responseError = await response.json();
    const code = responseError.ErrorCode;
    if (response.status === 409) {
      if (code === emailAlreadyExists) {
        setError("email", {
          type: "server",
          message: serverErrors[code],
        });
      } else if (code === usernameAlreadyExists) {
        setError("username", {
          type: "server",
          message: serverErrors[code],
        });
      }
    }
  } else if (response.ok) {
    navigate("/home");
  }
} catch (error) {
  throw error;
}
};

Does anyone have an idea why doesn’t it catch the error? All I get in the chrome’s console is "

Uncaught (in promise) TypeError: Failed to fetch
at onSubmit…

error. Thank you for your time.