How to implement react-scroll with Material UI that uses props/mapping the navbar items?

Question

I wanted to implement react scroll on my Material UI project. I cannot seem to make it work, I tried following youtube videos but no one seemed to use with MUI or incorporate it with props, also tried to look at the documentation but I have not found any information. Here is a part of the code from my Navbar.jsx

<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
    <img src={logo} alt="MUI logo" style={{ width: '100px', height: 'auto', paddingTop: '2rem' }} />
    <Divider />
    <List>
      {props.navItems.map((item) => (
        <ListItem key={item}>
          <Link
            to={item.toLowerCase()}
            spy={true}
            smooth={true}
            duration={500}
            activeClass="active"
          >
            <ListItemButton sx={{ textAlign: 'center' }} >
              <ListItemText primary={item} />
            </ListItemButton>
          </Link>
        </ListItem>
      ))}
    </List>
  </Box>

Here is a part of code from my Home.jsx that I'm trying to redirect the Link to:

<Navbar navItems={['Home', 'About', 'Join', 'Contact']} />
      <PageBanner />
      <HomeItem title='About Us' id='about us'>
        <Grid item md={6} sx={{ width: '100%', height: 'auto', }}>
          <img src="/src/img/building.png" alt="Building" style={{ width: "100%", height: "600px" }} />
        </Grid>
        <Grid item md={6} >
          <Box sx={{ width: '80%', margin: "0 auto", padding: '2rem ', marginTop: '2rem' }} id='about'>
            <Typography
              sx={{
                textAlign: 'left',
                fontFamily: 'Poppins, serif',
                fontWeight: '700',
                padding: '2rem 0',
              }}
              variant="h5">
              WHO WE ARE AND WHAT DO WE DO
            </Typography>
            <Typography sx={{ textAlign: 'left', fontFamily: 'Poppins, serif', }} variant="body1" >
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, necessitatibus facere fugiat placeat repellat magni atque sint doloremque ipsa veniam veritatis laboriosam maiores! Architecto reprehenderit deleniti, exercitationem suscipit molestiae facere qui soluta, voluptatibus odio vitae eos earum. Doloremque quis, dolore repellat tempore maxime ratione unde dicta id fugiat quo sint officia beatae amet quae. Explicabo doloremque rem dignissimos. Sed voluptas nulla illum nesciunt ad consequuntur doloremque tempore, neque laborum ipsum ducimus, optio, unde tempora! Perspiciatis ullam laboriosam ducimus, qui totam animi eveniet cum sit quasi consequuntur, excepturi fugiat eius voluptatibus saepe quo atque, ex vitae aspernatur suscipit. Maxime, est blanditiis.
            </Typography>
          </Box>
        </Grid>
      </HomeItem>

The navigation items are <Navbar navItems={['Home', 'About', 'Join', 'Contact']} />. I wanted to know if there is any way so that when I click on the navbar, it will smooth scroll on the about us section?