섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다

// model.ts

import { create } from 'zustand';

type State = {
    model: string;
};

type Action = {
    updateModel: (model: State['model']) => void;  
};

const useModelStore = create<State & Action>((set) => ({
    model: 'gpt-3.5-turbo',
    updateModel: (model) => set(() => ({ model })),
}));

export { useModelStore };

// ModelSelect.tsx
'use client';

import { useModelStore } from '@/store/model';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';

const MODELS = ['gpt-3.5-turbo', 'gpt-4', 'gpt-4o'];

export default function ModelSelect() {
    const { model: currentModel, updateModel } = useModelStore((state) => ({
        model: state.model,
        updateModel: state.updateModel,
    }));

    const handleChange = (selectModel: string) => {
        updateModel(selectModel);
    };

    return (
        <Select value={currentModel} onValueChange={handleChange}>
            <SelectTrigger className="w-[180px] border-none focus:ring-transparent">
                <SelectValue placeholder="모델 선택" />
            </SelectTrigger>

            <SelectContent>
                {MODELS.map((model) => (
                    <SelectItem key={model} value={model} disabled={currentModel === model}>
                        {model}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
}

위 코드 적용 결과 아래와 같은 무한반복 에러가 발생합니다. 강의 내용과 비교해 보아도 문제를 찾지 못했습니다 ㅜㅜ

const handleChange = (selectModel: string) => {
    if (selectModel !== currentModel) {
        updateModel(selectModel);
    }
};