Zustand state being triggered server side even though I have "use client"?

'use client';

import { create } from 'zustand';
import { setupAudio } from '@/lib/audio';
import { clearBufferedPlayerNodeBuffer } from '@/lib/audio/playback';
import { StarlightWebSocketRequestType, StopAudioRequest } from 'websocket/types';
import { useWebsocketStore } from '../websocket-store';
import { useTranscriptionStore } from './transcription-store';

type PlaybackStore = {
  audioContext: AudioContext | null;
  bufferedPlayerNode: AudioWorkletNode | null;
  gainNode: GainNode | null;
  socketState: string;
  volume: number;
  setVolume: (volume: number) => void;
  clearAudio: () => void;
  setup: () => void;
};

export const usePlaybackStore = create<PlaybackStore>((set, get) => {
  let initialVolume = 0.75;
  if (typeof localStorage !== 'undefined') {
    initialVolume = localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 0.75;
  }

  return {
    audioContext: null,
    bufferedPlayerNode: null,
    gainNode: null,
    socketState: '',
    volume: initialVolume,
    setVolume: (desiredVolume: number) => {
      const { gainNode } = get();
      if (!gainNode) return;

      const result = Math.max(0, Math.min(1, desiredVolume));
      gainNode.gain.value = result;
      set({ volume: result });

      if (typeof localStorage !== 'undefined') {
        localStorage.setItem('volume', result.toString());
      }
    },
    clearAudio: () => {
      const sendToServer = useWebsocketStore.getState().sendToServer;
      sendToServer({
        type: StarlightWebSocketRequestType.stopAudio,
        data: {},
      } as StopAudioRequest);

      const { bufferedPlayerNode } = get();
      clearBufferedPlayerNodeBuffer(bufferedPlayerNode);
    },
    setup: async () => {
      const { audioContext, bufferedPlayerNode, gainNode } = await setupAudio();

      gainNode.gain.value = initialVolume;

      set({ audioContext, bufferedPlayerNode, gainNode });

      useTranscriptionStore.getState().setupAudioRecorder();
    },
  };
});

'use client';

import { useEffect } from 'react';
import { useWebsocketStore } from '@/stores/websocket-store';
import { usePlaybackStore } from '@/stores/audio/playback-store';

export function StoreInitializer() {
  useEffect(() => {
    useWebsocketStore.getState().connect();
    usePlaybackStore.getState().setup();
  }, []);

  return null;
}