Hi I tried to create a basic register page using the kratos self-service and next.js, but I am getting

{
  "error": {
    "code": 404,
    "status": "Not Found",
    "message": "Unable to locate the resource"
  }
}

and this is a sample of how I am using the kratos.

"use client";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Configuration, FrontendApi } from "@ory/client";
import { edgeConfig } from "@ory/integrations/next";

const ory = new FrontendApi(new Configuration(edgeConfig));

function getCsrfTokenFromApiResponse(response) {
  try {
    const csrfToken = response?.data?.ui?.nodes?.find(
      (node) => node.attributes?.name === "csrf_token"
    )?.attributes?.value;
    return csrfToken || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}

function getFlowIdFromApiResponse(response) {
  try {
    const flowId = response?.data?.id;
    return flowId || null;
  } catch (error) {
    console.error("Error while parsing the API response:", error);
    return null;
  }
}


export default function Register() {
  const searchParams = useSearchParams();
  console.log(" searchParams", searchParams?.getAll);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const flow = useRef("");
  const csrfToken =  useRef("");

  useEffect(() => {
    const fetchFlow = async () => {
      const data = await ory.createBrowserRegistrationFlow();
      csrfToken.current = getCsrfTokenFromApiResponse(data);
      flow.current = getFlowIdFromApiResponse(data);
      console.log(data);
    };
    fetchFlow();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-CSRF-Token", csrfToken.current);

    var raw = JSON.stringify({
      method: "password",
      traits: {
        username,
      },
      password,
      csrf_token: csrfToken.current,
    });

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    fetch(
      `<http://127.0.0.1:4433/self-service/registration?flow=${flow.current}>`,
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Register</button>
    </form>
  );
}

Can someone point out my mistake and maybe suggest me better approach. I have also given config above.