JS doesn't put cookies after domain change for localhost

Question

Here is the tech stack:

1. FastAPI
2. React JS
3. Cloudflare for DNS resolving, SSL provider

I've recently changed my domain from x.com to y.com. My APIs reside x.com/api/v1/*. When React JS hits one of my APIs, browsers should be able to put the related cookie into the request. However that's not the case when I hit the APIs on localhost by using Brave or Firefox browsers, it doesn't happen on production which is https://y.com. I tried it with Edge and Chrome and I saw that JS is able to put the cookie to the request on both localhost and production.

It's weird because it didn't happen when I was using x.com domain. I checked if I make a mistake on ALLOWED_ORIGINS list which is the list I use on my CORS Middleware but I couldn't find a problem there:

ALLOWED_ORIGINS = [
    "https://y.com",
    "https://y.com/",
    "http://localhost:3000",
    "http://localhost:3000/",
    "http://localhost:3001",
    "http://localhost:3001/",
    "http://localhost:8080",
    "http://localhost:8080/",
    "http://localhost:5500",
    "http://localhost:5500/",
]

# CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=ALLOWED_ORIGINS,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allow_headers=["*"],
)

and also there is no problem in React JS side as well:

const getTopSellingProduct = () => {
    const finalUrl = "https://y.com"
    return axios.get(finalUrl, { withCredentials: true })
  }
  const { isLoading, isError, isSuccess, error, data } = useQuery({ queryKey: ["top-selling", selectedMonthId], queryFn: getTopSellingProduct });
  let TopSellingProduct
  if (isLoading) {

  } else if (isError) {
    console.log(error);
  } else {
    console.log(data.data);
    TopSellingProduct = data.data
  }

What might be the reason of that behavior of Brave and Firefox browsers and how can I resolve the issue ?