404 error while trying to use supabase rpc

Question

I have been building a platform for feedback gathering and then using the snippet to show others the feedback

Procedure

create
or replace function add_feedback (
  p_project_id integer,
  p_user_name text,
  p_user_email text,
  p_message text
) -- 1
returns bigint -- 2
language plpgsql -- 3
as $$ 
declare
  new_feedback_id bigint;
begin
  insert into feedbacks(project_id, user_name, user_email, message)
  values (p_project_id, p_user_name, p_user_email, p_message)
  returning id into new_feedback_id;

  return new_feedback_id;
end;
$$;

supabaseClient.js

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

// Create a single supabase client for interacting with your database
const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase;

Procedure call

import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import supabase from "../supabaseClient";
import tailwindStyles from "../index.css?inline";

const Widget = () => {
  const [rating, setRating] = useState(3);
  const [submitted, setSubmitted] = useState(false);

  const onSelectStar = (index) => {
    setRating(index + 1);
    console.log(`No.of stars clicked ${index}`);
  };

  const submit = async(e) => {
    e.preventDefault();
    const form = e.target;
    const data = {
      p_project_id: "1",
      p_user_name: form.name.value,
      p_user_email: form.email.value,
      p_message: form.feedback.value,
    };
    const {data : returnedData, error} = await supabase.rpc("add_function", data)
    setSubmitted(true);

    console.log(returnedData);
  };
  return (
    <>
      <style>{tailwindStyles}</style>
      <div className="widget bottom-4 fixed z-50 right-4">
        <Dialog>
          <DialogTrigger asChild>
            <Button className="rounded-full px-8 py-6 shadow-lg hover:scale-105 transition-all flex gap-2">
              <MessageIcon />
              Feedback
            </Button>
          </DialogTrigger>
          <DialogContent className="widget w-full rounded-lg bg-card p-4 shadow-lg max-w-md">
            <style>{tailwindStyles}</style>
            {submitted ? (
              <div className="p-5">
                <h3 className="text-2xl font-semibold">
                  Thank you for your feedback !!
                </h3>
                <p className="text-sm text-gray-500 pt-3">
                  We appreciate your feedback . It helps us improve our product
                  and provide better service to our customers{" "}
                </p>
              </div>
            ) : (
              <div>
                <h3 className="text-3xl font-bold">Send us your feedback</h3>
                <form className="space-y-2" onSubmit={submit}>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Name</Label>
                      <Input id="name" placeholder="Enter your name" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="Enter your email"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="feedback">Feedback</Label>
                    <Textarea
                      id="feedback"
                      placeholder="Give your valuable feedback here !!"
                      className="min-h-[100px]"
                    />
                  </div>
                  {/* <StarIcon /> */}

                  <div className="flex items-center justify-center gap-4 py-5">
                    {[...Array(5)].map((_, index) => (
                      <StarIcon
                        key={index}
                        className={`size-5 cursor-pointer ${
                          rating > index
                            ? "fill-primary"
                            : "fill-muted stroke-muted-foreground"
                        }`}
                        onClick={() => onSelectStar(index)}
                      />
                    ))}
                  </div>

                  <Button type="submit">Submit</Button>
                </form>
              </div>
            )}
          </DialogContent>
        </Dialog>
      </div>
    </>
  );
};

export default Widget;

function StarIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
    </svg>
  );
}

function MessageIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect width="20" height="16" x="2" y="4" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
  );
}

for now I have hard coded the projectId .. but its showing an error of @supabase_supabase-js.js?v=6a8562bd:3685 POST https://wmakiikghjbyuvlroddy.supabase.co/rest/v1/rpc/add_function 404 (Not Found)

I have tried to use the direct supabaseUrl and anonKey in the supabaseClient.js but more often it gave a response of 401 (unauthorized) Expecting : return with integers Gets null instead in the console