Video loader overrides the div element - reactjs

Question

The video loader overrides the fixed bottom element, thus makes it quite unpleasant. I'am streaming the videos online and player used for it is React HLS player. What would be the best solution to prevent the overriding of loader. Following is the code reference
React HLS Player
<ReactHlsPlayer
url={video_url}
autoplay={false}
controls={true}
width="100%"
height="auto"
config={{
file: {
forceHLS: true,
}
}}
/>
Bottom Navbar Code
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%"
}
});
<GridList className={classes.gridList}>
{itemList.map((tile, index) => {
return (
<GridListTile
key={tile.icon}
style={{ height: "70px", width: "25%" }}
>
<ListItem button key={tile.text}
onClick={(tile.text == "DirectLine") ? directLineFunc : ''}
>
<NavLink
exact
to={tile.link}
key={tile.key}
activeClassName="main-nav-active"
style={{ textAlign: "center" }}
isActive={(match, location) => {
match && setNewActiveLink(index)
return match;
}}
>
<ListItemText
disableTypography
primary={
<Typography
style={{
fontSize: "10px",
fontWeight: "bold",
fontFamily: "Nunito"
}}
>
{tile.text}
</Typography>
}
/>
</NavLink>
</ListItem>
</GridListTile>
);
})}
</GridList>
See the image below
And this the codesandbox link: https://codesandbox.io/s/react-material-forked-dtx6w

Answer 1

Finally I was able to sort out by adding 'zIndex:999' to gridList of BottomNavbar with the following changes in useStyles as:
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%",
zIndex: 999 {/* <-- Here I added this and issue solved */}
}
});

Answer 2

I added a style={{marginBottom: "100px"}} property in the <ReactHlsPlayer /> and it seems to fix your problem