This is the page from where i am sending the prop

  const [username, setusername] = useState(null);
const onSubmit = async (data) => {
    try {
      await fetch("http://localhost:3000/logout", {
        method: "POST",
        credentials: "include",
      });

      const response = await fetch("http://localhost:3000/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
        credentials: "include",
      });

      if (response.ok) {
        setusername(data.username);
      } else {
        console.error("Login failed");
      }
    } catch (error) {
      console.error("An error occurred during login", error);
    }
  };

return (
    <>
      <Home username={username} />
      <Main username={username} />
    </>
}

i am accessing the prop in main and home page, but i am getting undefined. I tried to log the value of username in console and its showing the username properly.

Any kind of suggestions will be grateful.