Fetch() is not working with async await while if I am working without async await it is working fine

Question

import classes from "./LoginForm.module.css";

var url =
  "token here";

const LoginForm = () => {
  const nameInput = useRef();
  const passwordInput = useRef();

  

const signupHandler = (event) => {
    event.preventDefault();
    const emailDetail = nameInput.current.value;
    const passwordDetail = passwordInput.current.value;

using fetchHandler() inside signupHandler(), So once I submit, both email and password will sign up a new user in Firebase. Using token from firebas. it was working when I was directly fetching without async await and using then for error,

const fetchHandler = async () => {
  const response = await fetch(url, {
    method: "Post",
    body: JSON.stringify({
      email: emailDetail,
      password: passwordDetail,
      returnSecureToken: true,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    throw new Error("something went wrong");
  }
  const data = await response.json();  
};

Form Data with for sign up , 2 input: email & password

    <React.Fragment>
      <form className={classes.form} onSubmit={signupHandler}>
        <div className={classes.email}>
          <label htmlFor="email">Enter Emial ID:</label>
          <input ref={nameInput} id="email" type="email"></input>
        </div>
        <div className={classes.password}>
          <label htmlFor="password">Enter Password:</label>
          <input ref={passwordInput} id="password" type="password"></input>
        </div>
        <button className={classes.button} type="submit">
          LogIN
        </button>
      </form>
    </React.Fragment>
  );
};
export default LoginForm;

//** Without async await , simple fetch() with then. If I am using this code it is working perfectly fine.Using firebase to singup as mentioned above **

    import React, { useState, useRef } from "react";
    import classes from "./LoginForm.module.css";
    
    var url =
      "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyCYlc6lnxZ8vA_4lCiz7e39dZ6B_yY4SOA";
    
    const LoginForm = () => {
      const nameInput = useRef();
      const passwordInput = useRef();
    
      const signupHandler = (event) => {
        event.preventDefault();
        const emailDetail = nameInput.current.value;
        const passwordDetail = passwordInput.current.value;
    
        fetch(url, {
          method: "Post",
          body: JSON.stringify({
            email: emailDetail,
            password: passwordDetail,
            returnSecureToken: true,
          }),
          headers: {
            "Content-Type": "application/json",
          },
        }).then((res) => {
          if (res.ok) {
            //nothing
          } else {
            return res.json().then((data) => {
              console.log(data);
            });
          }
        });
      };
    
      return (
        <React.Fragment>
          <form className={classes.form} onSubmit={signupHandler}>
            <div className={classes.email}>
              <label htmlFor="email">Enter Emial ID:</label>
              <input ref={nameInput} id="email" type="email"></input>
            </div>
            <div className={classes.password}>
              <label htmlFor="password">Enter Password:</label>
              <input ref={passwordInput} id="password" type="password"></input>
            </div>
            <button className={classes.button} type="submit">
              LogIN
            </button>
          </form>
        </React.Fragment>
      );
    };
    export default LoginForm;

Answer 1

response.json() also returns a promise, you have to await for it as well

const data = await response.json();