"Duplicate" of Chrome Tabs causes stale tokens

Our implementation for authentication works like this

1. User provides username/password to /login API
2. API returns access token and refresh token in payload
3. We store the access token and refresh token in session storage
4. After a period of time, the access token expires and the server throws expiry error, on which we hit the /refresh API, which returns a new refresh and access token again to be stored in session storage.

The issue

1. When a user duplicates a chrome tab, the session storage is also duplicated (the access token and refresh token) is same now in another tab.
2. When one of the tab has an expired token, it will hit the /refresh API and get new refresh token and access token. While the back-end will invalidate the previous pair of tokens.
3. Now one of the tab will have invalid token which causes all api calls to fail for that browser.

Proposed Solution

1. Use httpOnly cookies to store the access and refresh token. Which will solve the issue for us.
2. Use broadcast channel api to sync the 2 duplicate sessions

Even after a lot of research I'm unable to decide which solution would be more secure since we already have covered CSRF and XSS attack vectors as much as we can.