Reactjs Material-ui hide appBar sticky or static

Question

I am currently working on react js dashboard and use Material-UI components. There is a problem with Appbar. When I scroll down the page I want the appBar to disappear. But the position = "sticky" props mentioned in the AppBar api does not work. Also, I tried useScrollTrigger() function call in my code but it doesn't work.

My code part is here,

<div className={classes.root}> { console.log("return")}
      <CssBaseline />
      <AppBar color="default" position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
        <Toolbar className={classes.toolbar}>
        <ThemeProvider theme={theme}>
          {<Typography component="h1" variant="h6" color="secondary" noWrap className={classes.title}>
            <HomeIcon fontSize="large" />
          </Typography>}
          <Typography style={{fontSize:"3vw"}} color="secondary" className={classes.title}>
          {newTime.split(' ', 5).join(' ')}
          </Typography>
          
          <IconButton onClick={handleLogout} color="secondary">

            <ExitToAppIcon fontSize="large" />

          </IconButton>
        </ThemeProvider>
        </Toolbar>
      </AppBar>
</div>

 appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },

I tried position="static" but the whole page content disappeared. Only a white blank screen remained with an appBar. What should I do? Is there any way to solve this problem? I couldn't find the reason. Thanks for your help!