How can I make a component responsive in Material UI?

I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423

<Box
  sx={{ flexGrow: 1 }}
  m={5} pt={5}
  display="flex"
  justifyContent="flex-end"
  alignItems="flex-end"
>
  <Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
    <SearchIcon style={{ coSelf: "center", margin: "5px" }} />
    <TextField
      id="standard-search"
      label="Search for a company..."
      type="search"
      variant="standard"
      textAlign="center"
      fullWidth

    />
  </Grid>
  <Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
    <SettingsIcon/>
  </Button>
</Box>

Any help is appreciated.

>Solution :

Seems your search component is rendered but hiding behind the Stock Market Charting header as it gets longer in smaller screen sizes. If you have it as a fixed position try changing it to relative position, or remove/reduce the text inside it so it gets shorter for a quick test and might reveal the search component.