Strange behavior when pressing tab key on react native web

Current behavior

I have a project where a use material-top-tabs with two tabs (bug also appears with more tabs). In every tab, I have some elements that can be focused (in my project I have Pressable, in the snack, I have TouchableOpacity, in both cases, the bug appears). When pressing tab the first time, it focuses the other top tab. When pressing the second time, it focuses the focusable element of the first tab. When pressing a third time, I navigate to the second screen in which the top tab has disappeared.

Expected behavior

For the first two press, I expect it to be configurable and that pressing tab will not focus on the second top tab. I expect that pressing tab will never navigate me to the second screen (and even less so a second screen with a visual bug).

Reproduction

https://snack.expo.dev/@gillesn/bug-navigation

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

"@react-navigation/native": "6.0.6",
"react-native-safe-area-context": "3.3.2",
"@react-navigation/material-top-tabs": "6.0.6"",
"react-native-tab-view": "3.1.1",
"react-native-pager-view": "5.4.6"

Start with the linked Snack reproduction and the @react-navigation/material-top-tabs package on the web platform. Reproduce the Tab-key sequence across the material top tabs and focusable elements, then trace the relevant tab and focus handling. Done means Tab no longer unexpectedly focuses the other top tab or navigates to a second screen with the visual issue.