display doesn't show an element in MaterialUi in breakpoints

Question

I have a box component. I need to hide it if props are false and show if one of them is true. But when props are true, it is hidden. But when I switch to another component and return to those with boxes, it becomes visible.

<Box                              
            component={Grid}
            display={{
              xs: error || activity ? "block" : "none",
              sm: error || activity ? "block" : "none",
              md: "block",
            }}
           
          >
            <Component/>
          </Box> 

Answer 1

It would be easier to just use a condition in your return to display it or not.

function theBox(props){
  return (
  { props.display &&
         <Box                              
            component={Grid}
            display={{
              xs: error || activity ? "block" : "none",
              sm: error || activity ? "block" : "none",
              md: "block",
            }}
          >
            <Component/>
          </Box> 
  }
 );
}