[Next.js] No work the fast refresh when css saved

[HeppokoNeet]

Steps to reproduce

Steps: 1.yarn dev 2.save any css for pigment-css on vscode 3.not reflected saved css on the display

When I change color: "blue" to color: "red" then save it on the vs code editor, next fast refresh doesn't work(check the enviroment). If i refresh browser, it will be changed. So how can i solve this problem?

Current behavior

not reflected saved css on the display(no work next fast refresh)

Expected behavior

when save on vscode, work next fast refresh

Context

No response

Your environment

//package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "PORT=3001 next",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/material": "^6.1.6",
    "@pigment-css/nextjs-plugin": "^0.0.25",
    "@pigment-css/react": "^0.0.25",
    "destyle.css": "^4.0.1",
    "next": "15.0.2",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

//next.config.ts

import type { NextConfig } from "next";
import { withPigment } from "@pigment-css/nextjs-plugin";

const nextConfig: NextConfig = {
  presets: [],
  /* config options here */
};

export default withPigment(nextConfig);

//AdminLayout.tsx

"use client";
import { css } from "@pigment-css/react";

export default function AdminLayout() {
  const visuallyHidden = css({
    color: "blue",
  });

  return <div className={visuallyHidden}>あ</div>;
}

//page.tsx

import AdminLayout from "@/src/components/admin/common/AdminLayout";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "",
};

export default function UsersPage() {
  return (
    <div>
      <AdminLayout></AdminLayout>
    </div>
  );
}

Search keywords: fast refresh nextjs

[HeppokoNeet]

I find the solution which remove "use client" to activate fast refresh. pigment-css doesn't accommodate "use client" or it is not recommended?