Rails API cross-site cookies disappearing on refresh (production)

Question

I'm building a web app with Ruby on Rails as it's backend and Vue JS as it's frontend. Since the backend and frontend are deployed separately when I try to share cookies the cookies are applied but it doesn't persist i.e. it is removed after refreshing the page.

cookies[:message] = "hello"

The app works correctly in development at localhost but the issues start appearing in production mode.

I tried setting the cookies same-site attribute to none, below you can see my configuration in config/application.rb

# config/application.rb
config.middleware.use ActionDispatch::Cookies
config.action_dispatch.cookies_same_site_protection = :none

And below is how I'm receiving the cookies in Vue JS.

const res = await fetch("https://cookie-sep.onrender.com", {
  credentials: "include",
});

Also here is my CORS configuration, although I think everything is fine there.

allow do
  origins "https://cookie-sep-react-frontend.vercel.app"

  resource "*",
  headers: :any,
  methods: [:get, :post, :put, :patch, :delete, :options, :head],
  credentials: true
end