<Link> not working in <Button> for next.js

Trying to have a wrapping around a that I created in my Navbar as below shows:

  <NavBtn>
    <Link href="/contact" passHref>
      <Button>
        Contact Me
      </Button>
    </Link>
  </NavBtn>

Here is my custom Button.js

const StyledButton = styled.button`
  height: 45px;
  width: 130px;
  background: #908db9;
  border: none;
  border-radius: 4px;
  outline: none;
  color: #fafafa;
  font-size: 1.05rem;
  font-weight: 500;
  
  &:hover {
    background: #b8b4f0;
  }
`

const Button = ({ children }) => {
    return  <StyledButton><a onClick={() => console.log("clicked")}>{children}</a></StyledButton>
}

Basically, I cannot click the button like I normal behaviour. But I can't resolve where the issue is coming from :(

Please advise as I am a little lost in what I have done wrong. If need more information let me know! Thanks in advance.