Why this example with nextjs will make hydrate error?

[tjx666]

reproduce

online stackblize

core code

// CompA.tsx
import { useAtomValue } from 'jotai';
import { atomA } from './atoms';

export function CompA() {
  const a = useAtomValue(atomA);
  return <div>a: {a}</div>;
}

// CompB.tsx
import { useB } from './useB';

export function CompB() {
  useB();
  return <div>comp b</div>;
}

// useB.ts
import { useHydrateAtoms } from 'jotai/utils';
import { atomA } from './atoms';

export function useB() {
  useHydrateAtoms([[atomA, 'changed A']]);
}

// index.ts
import { CompA } from '../libs/CompA';
import { CompB } from '../libs/CompB';

export default function Home() {
  return (
    <div>
      <CompA />
      <CompB />
    </div>
  );
}

export function getServerSideProps() {
  return { props: {} };
}

Context

You can see here CompB call hook useB, and useB will call useHydrateAtoms([[atomA, 'changed A']]); to modify atomA. Why here will cause nextjs hydrate error?

Warning: Text content did not match. Server: "changed A" Client: "init a"

In my company app, I occur the same condition, but get another error:

Warning: Cannot update a component (`CompA`) while rendering a different component (`CompB`). To locate the bad setState() call inside `CompB`, follow the stack trace as described in 

reproduce example: https://stackblitz.com/edit/vitejs-vite-sfkwgj?file=src%2FCompA.tsx

[DavidJFelix]

The stackblitz examples are not showing hydration errors for me in chrome. Do you mind sharing your browser infromation and a list of plugins you're using?