Caching behavior for the same server function called in middleware and in another server function

[haidarkarrar]

I am trying to achieve caching on menu items

export const getMenus = async (branchId: string) => {
const appToken = await getAppAuthToken();

console.log(appToken)

if (appToken) {
    const headers = await getHeaders();
    headers.set('Authorization', 'Bearer ' + appToken);

    const url = http://...

    const res = await fetch(url, {
        method: 'GET',
        headers: headers,
        cache: 'force-cache',
        next: {
            tags: ['get-menus']
        }
    })

 ...
}

throw new Error('Something went wrong')

here the fetch inside menu is using the AppToken for Authorization, this is the getAppAuthToken function

export const getAppAuthToken = async () => {
const keys: Keys= {
    keys data ...
}

const headers = await getHeaders();

const url = http://...

const response = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(keys),
    headers: headers,
    cache: 'force-cache'
})

...

I am caching the AppToken too to be able to achieve caching on menus since it is being used there, which is working perfectly,
my problem is authentication => logging in requires AppToken too same as menus,
which is forcing me to uncache the AppToken and add cache : 'no-store' for the fetch in getAuthAppToken() and this leads to losing the caching on menus which is understandable I guess.

BUUUUT what's weird is this, when getAppAuthToken is still cached ('force-cache') and I call a function that calls it from the Middleware it revalidate ONLYY on this function??

export const refreshToken = async () => {
const appToken = await getAppAuthToken()
console.log(appToken)
...

the middleware:

export async function middleware(request: NextRequest) {
// handling localization
const handleI18nRouting = createMiddleware({
    defaultLocale: 'en',
    localePrefix,
    locales
});
const response = handleI18nRouting(request);

response.headers.set('x-your-custom-locale', defaultLocale);

// handling refreshing cookie
const expiryDate = cookies().get('aa-exp')?.value
const refreshTokenExist = cookies().get(REFRESH_AUTH_COOKIE)?.value

if (expiryDate && refreshTokenExist) {

    const convertedDate = new Date(expiryDate);

    const currentTime = new Date();

    if (convertedDate < currentTime) {
        console.log('middleware ran')
        const data = await refreshToken();
        if (!data) return
        const response = NextResponse.redirect(request.url)

        response.cookies.set(AUTH_COOKIE, data.access_token, {
            expires: (new Date(Date.now() + data.expires_in * 1000)),
            httpOnly: true,
        })

        const date = new Date(Date.now() + (data.expires_in - 30) * 1000).toUTCString()
        response.cookies.set('aa-exp', date)
        return response
    }
}

return response;

here the Middleware is awaiting refreshToken (which uses AppToken for Authorization),
the value of AppToken is always new which means it is being revalidated inside refreshToken()
but at the same time the value of the AppToken inside getMenu() is still the first cached value??? (the token is un-valid but getMenu() is not throwing 401 cause it is not being revalidated since AppToken is cached)

Is this the normal behavior? and if so, how can I achieve the same behavior between login() and getMenu same way between refreshToken() and getMenu() (to only revalidate AppToken inside the login() and keep the getMenu() cached)