Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hello,

I have a weird issue whenever I use typeof window to do a check for the ssr. The component is then not properly rendered

export const Phone = () => {
  const [isLightTheme, setIsLightTheme] = useState(
    typeof window !== "undefined"
  );
  useEffect(() => {
    setIsLightTheme(true);
  }, []);
  return (
    <a className={isLightTheme ? "text-white" : "text-dark"}>
      <div>{isLightTheme ? "text-white" : "text-dark"}</div>
    </a>
  );
};

My component looks like this, after the hydration, the text will correctly turn to text-white however, the className won't change

Reproduction Link

https://github.com/Axnyff/reproduction-gatsby

Steps to Reproduce

1. yarn && yarn build && yarn serve
2. Go to a browser to http://localhost:9001

Expected Result

The whole component should correctly be rerendered

Actual Result

text-dark will turn to text-white however, the className of the phone number will stay as text-dark

Environment

System:
    OS: Linux 5.13 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.1.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.1.0/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 98.0.2
  npmPackages:
    gatsby: 4.11.2 => 4.11.2

Config Flags

I have no flag and no gatsby-config