I am incorporating the Grow material ui component to display or hide a table. Initially, the table is visible. https://i.sstatic.net/0OxPQ.png
<Box className={classes.object_controls_wrapper}>
<Box sx={{ display: "flex" }}>
<Grow in={objectViewOpened}>{object_controls_view}</Grow>
</Box>
<FormControlLabel
control={
<Switch
checked={objectViewOpened}
onChange={handleToggleObjectViewOpened}
/>
}
label="Show"
/>
</Box>
However, once I toggle the show button, the table gets hidden behind the map.
https://i.sstatic.net/6r3M0.jpg
The parent div still maintains a high z-index level. https://i.sstatic.net/ZNf3E.jpg
When I utilize the icon from the material UI example, its visibility toggles correctly without getting hidden in this manner.
Any recommendations on how to identify the CSS attribute causing it to be concealed?
CODE SANDBOX LINKS
As advised, this is my codesandbox link with the triangle and show toggle in the upper-right corner working as expected.
Here is the version with material-table where it doesn't function properly.
FURTHER INPUT
Upon further experimentation, it seems the issue lies within the style wrapping the hidden div. In the following demonstration, it's evident that the div is still undergoing a "transition". Upon removing that style using developer tools, my component becomes visible. This transition style commences with an opacity of 0. Could this be due to my improper use of the Grow component or is it an actual bug in material ui?
https://i.sstatic.net/kgtn3.png
The additional snippet below does not seem to eliminate the style:
<Grow
in={objectViewOpened}
style={{ transformOrigin: "0 0 0" }}
{...(objectViewOpened ? { timeout: 1000 } : {})}
>
{object_controls_view}
</Grow>
This code is directly from their documentation (the syntax isn't fully understood by me):