styled component's hashed value in SSR(Next.js)

[jiwoo-choi]

I'm not sure this is a noob question, but Why does styled-component generate different hashed values(className) on server and client each, when I doing SSR + CSR (like Next.js)

When I try to run Next.js app, during hydration process, React claims the warning such as "Warning: Prop className did not match. Server: "sc-dkrFOg cchAFl" Client: "sc-bcXHqe dfSFfT".

I know how to resolve this issue by adding babel plugins or swc plugins.
But to my understanding, server and client try to render same components at first place. It means that they should have same input, which leads to same output from the hash function.

Am i missing something?