Google chrome not respecting max-age in Cache-Control

I have a react app in which I am doing fetch request to backend API's. I am trying to implement caching in the UI side for heavy request.

I am able to do it successfully in Mozilla Firefox and it's working perfectly fine. But chrome is giving me hard time. Here is the piece of code I am trying to implement -

        fetch(URL, {
            signal: this.abortController.signal,
            cache: "default",
            headers: {
                "Cache-Control": "max-age=120"
            }
        })
            .then(response => return response.json())
            .catch(error => {
                if (error.name === "AbortError") {
                    return;
                }
                this.setError(error);
            });

Process I am following to check cache-

1. First opening the tab which is doing the fetch request.
2. Change the tab to different one.
3. Return back to the tab mentioned in step 1 within the timeout period (120 sec)

While inspecting in network tab for Firefox, I can see the 'Transferred' as 'cached' and significant improvement in page loading and everything working as expected.

However, in Chrome I can still see the 'Size' with '3.9 KB' and time with some 'ms'.

I tried steps mentioned in - Is Chrome ignoring Cache-Control: max-age? without any success.

I also found - https://www.mnot.net/blog/2017/03/16/browser-caching saying

Chrome only supports max-age=0 in requests, and only with the value 0. It does not support min-fresh or max-stale.

But its little old(2017) and I am not sure it still hold true.

Also, looking at Fetch specification - https://fetch.spec.whatwg.org/#concept-request-cache-mode 'default' is cache-mode which I need, but I am not sure why it is not working across chrome

Could anyone please guide me in right direction ? What need to be done to make it work in both firefox and chrome ?

EDIT - Ok, using 'cache' as 'force-cache' works in google chrome and firefox both.

From - https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

“default” means use the default behavior of browsers when downloading resources. Is the default behavior different for firefox and chrome ? Since it is default behavior of a browser, it upto browser how they use this.

Also,

“force-cache” means that the browser will always use a cached response if a matching entry is found in the cache, ignoring the validity of the response. Thus even if a really old version of the response is found in the cache, it will always be used without validation.

I am not sure how 'force-cache' is working for chrome but this is something I don't need.