Next JS Styling issue With Styled Componets

Question

I am using Styled Components for theming in NextJS. The problem is when I am trying to switch between themes I am getting an error saying "Warning: Prop className did not match. Server: "Nav__StyledH1-sc-8drudr-1 iZkprX" Client: "Nav__StyledH1-sc-8drudr-1 hENraf". I have tried the way official documentation showing add .babelrc to updating _document page but nothing working for me.enter image description here

import React from "react";
import styled, { ThemeContext } from "styled-components";
import Link from "next/link";
import Container from "./utill/Container";
import FlexContainer from "./utill/FlexContainer";

const StyledLogo = styled.div`
  width: 25%;
  @media (max-width: 700px) {
    width: 30%;
  }
`;
const StyledH1 = styled.h1`
  font-size: 35px;
  font-weight: 900;
  margin: 0;
  color: ${({ theme }) => theme.text.primary};
`;

const StyledNav = styled.div`
  flex: 1;
`;

const StyledUl = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
`;
const StyledList = styled.li`
  font-size: 18px;
  font-weight: 800;
  margin-left: 15px;
  color: ${({ theme }) => theme.text.primary};
  cursor: pointer;
`;

const Nav = (props) => {
  const themeContext = React.useContext(ThemeContext);
  return (
    <Container>
      <FlexContainer>
        <StyledLogo>
          <StyledH1>ডেভ ডক্স</StyledH1>
        </StyledLogo>
        <StyledNav>
          <StyledUl>
            <StyledList>
              <Link href='/'>
                <a>স্টার দিন</a>
              </Link>
            </StyledList>
            <StyledList>
              <Link href='/'>
                <a>কন্ট্রিবিউট করুন</a>
              </Link>
            </StyledList>
            <StyledList onClick={themeContext.darkMode.toggle}>{themeContext.darkMode.value ? "লাইট মুড" : "ডার্ক মুড"}</StyledList>
          </StyledUl>
        </StyledNav>
      </FlexContainer>
    </Container>
  );
};

export default Nav;