Focusing issue on hidden (display : none) element

**Describe the bug**
Initially the focus is on TvShows tab. When i am navigating to Movies tab and pressing down key, TvShows tab's element should hide but here Movies tab's element is layering over TvShows tab's element and the focus still remains on TvShows tab's element which should be on Movies tab's element. Basically i am trying to make custom top tab navigator. I have used SpatialNavigationRoot in its parent component

**To Reproduce**
```tsx
const MainScreen = () => {
const mainFocus = useSelector((state) => state.currentFocus.focusedType)
const [tabFocusArr, setTabFocusArr] = useState([])
useEffect(() => {
if (!tabFocusArr.includes(mainFocus)) {
setTabFocusArr([...tabFocusArr, mainFocus])
}
}, [mainFocus])

return (

{tabFocusArr.includes('TvShows') && }
{tabFocusArr.includes('Movies') && }

)
}

export default memo(MainScreen)
```

**Expected behavior**
When i focus on videos tab the photos tab's element and when i press down it should focus on videos tab's element

**Version and OS**
- Library version: [e.g. 1.0.0]
- React Native version: [e.g. 0.76.3]
- OS [tvOS]