Nextjs redirect not working after running POST request

I have a button that submits a form. That submit function runs a post request to my api route and in the api route, I insert a row in my database. I need to redirect the user to / when its all done. But for some reason return redirect("/") just doesn’t work. My tab just stays on loading and nothing happens.

Submit function:

const handleSubmit = async () => {;
        try {
            const res = await fetch("/api/saveRecipe", {
                method: "POST", 
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    title: title,
                    time: time,
                    time_unit: timeUnit,
                    serves: serves,
                    ingredients: ingredients,
                    instructions: instructions,
                }),
            });
      
        } catch (e) {
            console.log(e.message || e.description);
        }
    };

api/saveRecipe/route.js

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";
export async function POST(req) {
    const supabase = createRouteHandlerClient({ cookies });
    try {
        const data = await req.json();
        const { recipe, error } = await supabase.from("Recipes").insert([data]);
        if (error) {
            throw error;
        }
    } catch (error) {
        console.log(error.description || error.message);
    }

    return redirect("/");
}

The row gets added to the database successfully so its not a problem with the api calls. And this exact redirect line was used in another route and it works fine so idk what’s going on