How do I correctly implement Immersive Full-Screen Mode in Android?

I have an application where I have a single activity that contains layers of fragments. I wanted to Switch between Immersive mode and Normal mode during some states of the app. Everything was fine until I call Hide System UI as per Android Documentation

The sizes of the fragments started to go weird. No solutions found in stack overflow was any help.

I have uploaded the project to GitHub . Could you please provide some insights on what I am doing wrong?

1. Project When Started

2. When another Fragment was added to the same FrameLayout

3. When Third fragment was added to another FrameLayout while Immersive mode is triggered

4. Problem begins When Third Fragment's View minimised we trigger "Normal Mode". The top and bottom of the Previous fragments were cut out.

Moreover, Go Full Screen, Rotate and then Tap tap on PIP. It gets more ugly.

I have uploaded the project to GitHub . Could you please provide some insights on what I am doing wrong?