Vue3 419 With laravel

I'm trying to debug a 419 response with laravel breeze api setup and vue3 for the frontend

Here is my .env file

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=http://localhost:3000
SESSION_DOMAIN=localhost

Tried to log the request headers in the getTokenFromRequest function within the VerifyCsrfToken middleware using:

Log::debug($request->headers);

And got this result:

[2024-07-09 17:56:03] local.DEBUG: Accept:             application/json, text/plain, */*
Accept-Encoding:    gzip, deflate, br, zstd
Accept-Language:    en-US,en;q=0.9,ar;q=0.8
Connection:         keep-alive
Content-Length:     2
Content-Type:       application/json
Cookie:             XSRF-TOKEN=eyJpdiI6IjRuTTBiZmV2L0dPbDhWL1ZLQnBWS0E9PSIsInZhbHVlIjoia3M3YWxTV0NFL0JSMFpQdWxpcU1oaEVTNE93TnplRHRwTkNLcGNaOEhJcDYyRzBEQWh6U2k1elF1cUlUTU9kbWo0eXJCOFBEdlZteDhnQlc5Snk4UkIvL1JnTVdOTTF4dkk4K3BZa01OM0dWcTd1SWp2blI4UHRzeTRydlEydG0iLCJtYWMiOiI1ZmE3MjUzMzU5NGY2OGYxZmFiYjFkNjM5YjRlYmVlZjEzMDBlMjk0ODUyYWU1ZTdmNzVhMGFiM2Q5ODBkMDdjIiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6IlJ3NDNiaTNmOEVibGFiZjNVVTNuZUE9PSIsInZhbHVlIjoiUVVORWg4L1NkMUdBcnFES0tPaHRDOTZWOUN3WTJUaUpwWHJUSTM3Mjkzd1FxYmNtdmRxSm9iRWlyL1Fhd2JsRjdpc0N1a3llUWt2RFVRcGViNkZhbXlzZjVLM3c0VHFzQmUreUV4RFhqTjZXSnF0Z1BjcVpzMy9ETzhTdkVBeGYiLCJtYWMiOiI3NjNiNDllYjcyZDE5MmJiM2RjMzM2ZjViZjJkODg5MzA3MzMxMzk3M2U3ODAwZGI2NWYyNTBkZGJhMDY5MTAyIiwidGFnIjoiIn0%3D
Host:               localhost:8000
Origin:             http://localhost:3000
Referer:            http://localhost:3000/
Sec-Ch-Ua:          "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"
Sec-Ch-Ua-Mobile:   ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest:     empty
Sec-Fetch-Mode:     cors
Sec-Fetch-Site:     same-site
User-Agent:         Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

So it looks to me like the cookies are being sent indeed, so what is going on here? What is the problem?!! Can anyone help?