i’m building a project with NextJS and MUI and facing this error importing useScrollTrigger function from the mui library.

_{Here’s my package.json:}

{
"name": "shadypalms",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.18",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.378.0",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

_{My Navbar.tsx}

import React from 'react';
// import {AppBar, Toolbar, Typography, CssBaseline, useScrollTrigger, Box, Container, Slide} from '@mui/material'
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import CssBaseline from '@mui/material/CssBaseline';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Slide from '@mui/material/Slide';

interface Props {
children: React.ReactElement;
}

function HideOnScroll(props: Props) {
const trigger = useScrollTrigger();
return (
<Slide appear={false} direction="down" in={!trigger}>
{props.children}
</Slide>
);

}

const Navbar = (props: Props) => {
return (

      <HideOnScroll {...props}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6" component="div" color={'white'}>
              Scroll to hide App bar
            </Typography>
          </Toolbar>
        </AppBar>
      </HideOnScroll>

)
}

export default Navbar

_{@mui/material/useScrollTrigger/index.d.ts}

export { default } from './useScrollTrigger';

<sub>useScrollTrigger</sub>
export interface UseScrollTriggerOptions {
disableHysteresis?: boolean;
target?: Node | Window;
threshold?: number;
}

export default function useScrollTrigger(options?: UseScrollTriggerOptions): boolean;

_{Full Error:}

components/Navbar.tsx (20:37) @ useScrollTrigger

⨯ TypeError: (0 , _mui_material_useScrollTrigger__WEBPACK_IMPORTED_MODULE_2__.default) is not a function
at HideOnScroll (./components/Navbar.tsx:26:95)
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "3745371282"

I tried looking into webpack issues and tried changing the imports and exports from the mui library itself but it didnt seem to work.