I have read through the existing solutions and still cant seem to get it to work.

components/NavBar.tsx

import { Box, Link } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import NextLink from "next/link";

interface NavBarProps {}

const NavBar: FunctionComponent<any> = (props) => {
  return (
    <Box {...props} bg="tomato" w="100%" p={4} ml={"auto"} color="white">
      <NextLink href="/login">
        <Link mr={4}>Login</Link>
      </NextLink>
      <NextLink href="/register">
        <Link>Register</Link>
      </NextLink>
    </Box>
  );
};

export default NavBar;

index.tsx

import NavBar from "../components/navbar";

const Index = () => (
  <>
    <NavBar></NavBar>
    <div>hello world</div>
  </>
);

export default Index;

Error Screenshot Error Messsage