[Nextjs]"Expected server HTML to contain a matching <button> in <header>." が表示されてしまう

Question

聞きたいこと

webブラウザのウィンドウサイズによってヘッダーナビゲーションを動的に変更したいと思っています。

具体的にはモバイル用のウィンドウサイズとPC用のウィンドウサイズでヘッダーナビゲーションを変更しようと思っているのですが、
ウィンドウサイズをモバイル用サイズにした状態でブラウザをリロードすると、下のワーニングメッセージが表示されてしまいます。

react-dom.development.js?61bb:88 Warning: Expected server HTML to contain a matching <button> in <header>

ソースコード

• _app.tsx

import React from 'react';
import { AppProps } from 'next/app';
import { RecoilRoot } from 'recoil';
import '@@/styles/globals.css';

import HeaderContainer from '@/components/containers/HeaderContainer';

const App = ({ Component, pageProps }: AppProps): any => {
  return (
    <RecoilRoot>
      {/* ここでHeaderContainerを呼び出し */}
      <HeaderContainer />
      <Component {...pageProps} />
    </RecoilRoot>
  );
};

export default App;

• HeaderContainer.tsx

import * as React from 'react';

import Header from '@/components/gui/groups/Header';
import { useWindowDimensions } from '@/hooks';

const HeaderContainer: React.FC = () => {
  const { width, height } = useWindowDimensions();
  // useWindowDimensions() カスタムコンポーネントから取得したwidth, heightをHeaderに引き渡し
  return (
    <Header width={width} />
  )
}

export default HeaderContainer;

• useWindowDimensions.ts

import * as React from 'react';
import { atom, useRecoilState } from 'recoil';

const getWindowDimensions = () => {
  let width: number;
  let height: number;
  if (process.browser) {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  return {
    width,
    height
  };
}

export const windowDimensionsState = atom({
  key: 'windowDimensionsState',
  default: getWindowDimensions()
})

const useWindowDimensions = () => {
  const [windowDimensions, setWindowDimensions] = useRecoilState(windowDimensionsState);
  React.useEffect(() => {
    if (process.browser) {
      const onResize = () => {
        setWindowDimensions(getWindowDimensions);
      }
      window.addEventListener('resize', onResize);
      return () => {
        window.removeEventListener('resize', onResize)
      }
    }
  }, [])
  // stateで管理されたwidth, heightをreturnする
  return windowDimensions;
}

export { useWindowDimensions }

• Header.tsx

import * as React from 'react';
import Link from 'next/link';
import styled from 'styled-components';

import { PRIMARY, TABLET_MEDIA, MOBILE_MEDIA } from '@/utils/constants';
import { Burger } from '@/components/gui/parts/Burger';

interface Props {
  width: number
}

const Header: React.FC<Props> = (props) => {
  const { width } = props;

  if (width < 600) {
    // モバイル用のHeader
    return (
      <Wrapper>
        <Burger />
      </Wrapper>
    )
  } else {
    // PC用のHeader
    return (
      <Wrapper>
        <Nav>
          <Link href="/top">
            <StyledA>Top</StyledA>
          </Link>
        </Nav>
      </Wrapper>
    );
  }
};

export default Header;

const Wrapper = styled.header`
  background-color: ${PRIMARY};
  position: fixed;
  z-index: 999;
  height: 55px;
  top: 0;
  left: 0;
  right: 0;
`;

const Nav = styled.nav`
  max-width: 800px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 15px 5px;
  ${TABLET_MEDIA} {
    padding: 15px 30px;
  }
  ${MOBILE_MEDIA} {
    padding: 15px;
  }
`;

const StyledA = styled.a`
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease;
  line-height: 24px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 300;
  letter-spacing: 0.075em;
  margin-right: 1.8em;
  cursor: pointer;
  &:hover {
    color: #fff;
  }
`;

• Burger.tsx

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

const Burger = () => {
  return (
    <Button>
      <div />
      <div />
      <div />
    </Button>
  )
}

export { Burger };

const Button = styled.button`
  position: absolute;
  top: 5%;
  left: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  
  &:focus {
    outline: none;
  }
  
  div {
    width: 2rem;
    height: 0.25rem;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
  }
`;