'[Repro provided]React Navigation v6 hiding tabbar with {display:none} does not work on iOS

I am trying to achieve dynamically hiding tab bar behavior. I already know what documentation suggest for this purpose.

However, I am not a big fan of restructuring whole navigators and routes for only hiding tab bar. Thus, I did prefer a more dynamic way. But, I am facing a problem with IOS simulator/real device. It works fine on android devices.

What I do is basically, (just a summary of the logic I do apply)

  <BottomTabBar
    style={{ display: shouldRenderTabBar ? "flex" : "none" }}
    {...props}
  />;

And this is what happens on ios simulator/real-device. Video link

Seems like display:none doesn't affect anyway to height of bottom tab bar. I am wondering while it works on android emulator/real-device what's wrong with IOS?

UPDATE

Repro provided.

https://snack.expo.dev/@tarikfp/hide-bottom-bar-fails-on-ios

Demonstration video of repro