First of all, it's good to mention that I'm a bit new to react world. I am using Mui with react. here is my code:

const Search = (props) => {
    const theme = useTheme();
    const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
    return !isSmall || props.show ? <SearchDiv {...props} /> : null;
};

as you can see it's a simple component that under a circumstance returns another custom component. my problem is that if I Don't add {...props} to the child component(SearchDiv) the whole component Search won't show up. but if I add everything works fine and I can't understand why? do we always need to pass all props to any child component?

I searched StackOverflow and google but I didn't find something similar to my question.

Edit : here is the rest of the code:

const SearchDiv = styled("div")(({ theme }) => ({
    position: "relative",
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    "&:hover": {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: "50%",

   [theme.breakpoints.up("sm")]: {
   marginLeft: theme.spacing(1),
   },
   [theme.breakpoints.down("sm")]: {
   marginLeft: theme.spacing(1),
   },
  }));

const Navbar = () => {
  const [showSearch, setShowSearch] = useState(false);

  return (
    <AppBar>
     <Toolbar sx={{ display: "flex", justifyContent: "space-between"     }}>
        <Search show={showSearch}>

        <StyledInputBase
        placeholder="Search…"
        inputProps={{ "aria-label": "search" }}
        />
        </Search>
        <SearchIcon onClick={() => setShowSearch(true)} />

      </Toolbar>
    </AppBar>
  );
};

export default Navbar;