I have a NextJs v13 post api route to logout a user of a site - by deleting the JWT from the cookies.

The code of the route is

import {NextResponse} from 'next/server';
import {cookies} from "next/headers";
import { redirect } from "next/navigation";
import {RequestCookie} from "next/dist/compiled/@edge-runtime/cookies";

export async function POST() {
    const jwt: RequestCookie | undefined = cookies().get("token");

    if (!jwt) {
         NextResponse.json(
            { success: false, message: "No JWT provided" },
            { status: 400, headers: { 'content-type': 'application/json' } }
        );

        return redirect("/");
    }

    const response = NextResponse.json(
        { success: true, message: "Successfully logged out" },
        { status: 200, headers: { 'content-type': 'application/json' }}
    );

    response.cookies.delete("token")

    console.log(cookies().getAll()) // here for testing purposes

    return redirect("/");
}

But when I click the logout button (which posts this route), everything runs fine but the token is still logged in the array of cookes after it has been deleted.

 {
    "name": "token",
    "value": "JWT VALUE HERE",
    "path": "/"
 }

I checked on chrome dev tools to see if the token is removed as well, but it isn't. I've been told that the method

response.cookies.delete()

just marks the cookie as expired but I'd like to know how I can actually remove it from the array of cookies - either client side or server side (which ever way is better, if there are multiple ways).

Sorry if this seems obvious, I tried looking at the docs but couldn't really find an answer to my question.

Thank you in advance