const [degree, setDegree] = useState<number>(0);

<button
  onClick={() => setDegree((prev) => prev + 22.5)}
  css={signInUpStyles.button}
>
◀ left
</button>
<button
  onClick={() => setDegree((prev) => prev - 22.5)}
  css={signInUpStyles.button}
>
right ▶
</button>

<section
  css={[
    flexCenterX2,
    widthHeightFull,
    css`
      gap: 10px;
      padding: 10px;
      transform-style: preserve-3d;
      transform: perspective(800px) rotateY(${degree}deg);
      transition: 0.5s;
    `,
  ]}
>

I wanted to make a rotative component by changing the state by clicking the buttons. But for some reasons, the state doesn’t change on random numbers(45, -67.5, etc.), and I don’t know why it happens like this.
The thing is when I don’t use it for the rotateY, the state changes perfect as it’s been always. Help me pls

i dont know what to do…