NextJS Hydration Error - Hydration failed

Question

I'm using NextLink with my project to creat links, however it seems using NextLink returns this error Hydration failed because the initial UI does not match what was rendered on the server.

Now upon checking the console this is what i'm getting as error: Expected server HTML to contain a matching <a> in <a>. This doesn't happen when I change to Link .

Here is the code that's making the error:

<Box flex={1} align="right">
      <Box ml={2} display={{ base: 'inline-block', md: 'none' }}>
        <Menu>
          <MenuButton
            as={IconButton}
            icon={<HamburgerIcon />}
            variant="outline"
            aria-label="Options"
          />
          <MenuList>
            <NextLink href="/" passHref>
              <MenuItem as={Link}> About</MenuItem>
            </NextLink>
            <NextLink href="/" passHref>
              <MenuItem as={Link}> Work</MenuItem>
            </NextLink>
          </MenuList>
        </Menu>
      </Box>
    </Box>