React Server-Side Rendering (SSR) Error with styled-components Button in Next.js 13.4.1

I am currently developing a React application using Next.js version 13.4.1 and styled-components. I’m experiencing an issue with my custom Button component as follows:

import React from 'react';
import styled from 'styled-components';

interface ButtonProps {
  $primary?: boolean;
}

const Button = styled.button<ButtonProps>`
  background: red;
`;

const Nav: React.FC = () => {
  return (
    <div>
      <Button>Primary Button</Button> // this one
      <nav>
        <ul>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
          <li><a href="#">Menu4</a></li>
        </ul>
      </nav>
    </div>
  );
}

export default Nav;

The issue arises when I attempt to run the application with the command npm run dev. An Unhandled Runtime Error is thrown, with the following details:

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <button> in <div>.

Upon inspecting the source code, I found that the <button> element is not being rendered, as what the error message suggests.

I am unable to understand why the is not being rendered in the server HTML. I have the above code in a file named “Nav.tsx” which I import into “page.tsx”.

How can I resolve this issue and ensure my <Button> component is correctly rendered by the server? Any assistance would be greatly appreciated.