Reactjs – I can't make changes to the interface in stylex (next.js & react)

The css codes I wrote do not appear in the interface. The strange thing is that sometimes everything is fine and sometimes all the styles disappear. This is how it looks on the console

// designs.stylex.js

import * as stylex from '@stylexjs/stylex';
export const DARK = '@media (prefers-color-scheme: dark)';

export const color = stylex.defineVars({
  none: 'none',
  primary: '#FF3674',
  secondary: '#5A15B4',
  tertiary: '#5AEAB9',
  white: '#ffffff',
  xxxLightGray: '#F7F7F7',
  xxLightGray: '#EBEBEB',
  xLightGray: '#DDDDDD',
  lightGray: '#B0B0B0',
  gray: '#717171',
  extraLightGray: '#A2A2A2',
  darkGray: '#33383b',
  xDarkGray: '#222222',
  xxDarkGray: '#1B1B1B',
  xxxDarkGray: '#151515',
  black: '#000000',
  secureGreen: '#00BF6C',
  primaryGradient: 'linear-gradient(270deg, #BE008F 0%, #FF304E 100%)',
  secondaryGradient:
    'linear-gradient(90deg, #59086E 0%, #460479 50%, #440589 100%)',
});
export const fontColor = stylex.defineVars({
  white: color.white,
  light: color.lightGray,
  lightGray: color.extraLightGray,
  gray: color.gray,
  dark: color.xDarkGray,
  black: color.black,
  primary: color.primary,
  secondary: color.secondary,
});

export const tokens = stylex.defineVars({
  fontSizeM: '1rem',
  fontSizeL: '2rem',
  spaceM: '16px',
  spaceL: '20px',
});

export const width = stylex.defineVars({
  oneOfThird: '33%',
  half: '50%',
  full: '100%',
  screen: '100vw',
});

export const gaps = stylex.defineVars({
  xs: '8px',
  sm: '12px',
  md: '14px',
  lg: '28px',
  xl: '40px',
});

export const fontSize = stylex.defineVars({
  xxs: '11px',
  xs: '12px',
  s: '14px',
  m: '16px',
  l: '18px',
  xl: '22px',
  xxl: '26px',
  xxxl: '32px',
});

export const padding = stylex.defineVars({
  none: '0px',
  xxs: '2px',
  xs: '4px',
  s: '8px',
  m: '12px',
  l: '16px',
  xl: '32px',
  xxl: '64px',
});

export const buttonPadding = stylex.defineVars({
  xxs: '8px 14px',
  xs: '10px 18px',
  s: '11px 20px',
  m: '12px 22px',
  l: '13px 23px',
  xl: '14px 24px',
  xxl: '16px 28px',
});

export const iconSize = stylex.defineVars({
  s: '16px',
  m: '24px',
  l: '32px',
});

export const height = stylex.defineVars({
  oneOfThird: '33%',
  half: '50%',
  full: '100%',
  screen: '100vh',
});

export const spacing = stylex.defineVars({
  none: '0px',
  xs: '4px',
  s: '8px',
  m: '12px',
  l: '16px',
  xl: '28px',
  xxl: '48px',
  xxxl: '96px',
});

export const borderRadius = stylex.defineVars({
  none: '0px',
  xxs: '2px',
  xs: '4px',
  s: '8px',
  m: '12px',
  l: '16px',
  xl: '24px',
  xxl: '32px',
  full: '100px',
});

export const boxShadow = stylex.defineVars({
  light: '0px 2px 4px rgba(0, 0, 0, 0.1)',
  medium: '0px 4px 8px rgba(0, 0, 0, 0.1)',
  dark: '0px 8px 16px rgba(0, 0, 0, 0.1)',
});

export const fontWeight = stylex.defineVars({
  light: '300',
  regular: '400',
  medium: '500',
  semiBold: '600',
});

// styles.ts

import * as stylex from '@stylexjs/stylex';
import {
  borderRadius,
  color,
  fontColor,
  fontSize,
  gaps,
  height,
  spacing,
  width,
} from '../../config/designs.stylex';

export const stylesItem = stylex.create({
  image: {
    borderRadius: borderRadius.s,
    height: '320px',
    width: '320px',
    objectFit: 'cover',
  },
  avatar: {
    display: 'flex',
    alignItems: 'center',
    gap: `0 ${gaps.xs}`,
    marginBottom: spacing.s,
    fontSize: fontSize.xs,
    color: fontColor.gray,
  },
  flex: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardBodyWrapper: {
    position: 'relative',
    display: 'flex',
    width: width.full,
    height: height.full,
    flexDirection: 'column',
    borderRadius: borderRadius.s,
  },
  pin: {
    position: 'absolute',
    right: '8px',
    top: '8px',
    zIndex: 20,
  },
  cardFooterWrapper: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    flexGrow: 1,
    margin: `${spacing.s} ${spacing.m} 0 ${spacing.s}`,
  },
  likeWrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  price: {
    fontSize: fontSize.s,
    color: fontColor.dark,
    margin: 0,
  },
  likeButton: {
    cursor: 'pointer',
  },
  svg: {
    fill: {
      ':hover': color.primary,
    },
  },
  brand: {
    marginTop: spacing.xs,
    display: 'inline-flex',
    alignItems: 'center',
    fontSize: fontSize.xs,
    color: fontColor.gray,
  },
  parsedBadgeWrapper: {
    position: 'absolute',
    right: 0,
    left: 0,
    bottom: 0,
    display: 'flex',
    borderBottomRightRadius: borderRadius.s,
    borderBottomLeftRadius: borderRadius.s,
  },
  parsedBadgeLeft: {
    display: 'flex',
    height: spacing.xl,
    width: width.half,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: color.white,
    opacity: 0.9,
  },
  badgeLeftText: {
    fontSize: fontSize.xs,
    color: fontColor.gray,
  },
  parsedBadgeRight: {
    display: 'flex',
    height: spacing.xl,
    width: width.half,
    alignItems: 'center',
    justifyContent: 'center',
    background: color.extraLightGray,
    opacity: 0.7,
  },
  badgeRightText: {
    fontSize: fontSize.xs,
    color: fontColor.white,
    whiteSpace: 'nowrap',
  },
});

My code which I applied stylex

 <section {...stylex.props(styles.wrapper)}>
      <div {...stylex.props(styles.itemWrapper)}>
        {productStaticArray.map((item) => (
          <GridItem item={item} key={item.id} />
        ))}
      </div>
    </section>

// next.config.js

/** @type {import('next').NextConfig} */
const stylexPlugin = require('@stylexjs/nextjs-plugin');
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'xxx',
        hostname: 'images.xxxx.com',
      },
    ],
  },
};

module.exports = stylexPlugin({
  filename: 'stylex-bundle.css',
  rootDir: __dirname,
  useCSSLayers: true,
})(nextConfig);`


// package.json
` "dependencies": {
    "@formatjs/intl-localematcher": "^0.5.0",
    "@stylexjs/babel-plugin": "^0.5.1",
    "@stylexjs/nextjs-plugin": "^0.5.1",
    "@stylexjs/open-props": "^0.5.1",
    "@stylexjs/stylex": "^0.5.1",
    "@stylexjs/webpack-plugin": "^0.5.1",
    "geist": "^1.1.0",
    "negotiator": "^0.6.3",
    "next": "14.0.1",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/negotiator": "^0.6.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.1",
    "postcss": "^8",
    "prettier": "^3.1.0",
    "prettier-plugin-organize-imports": "^3.2.3",
    "typescript": "^5"
  }

The codes I wrote need to be implemented in a stable way