Как использовать динамически вычисляемые классы попутного ветра в пользовательском интерфейсе Shadcn с помощью реакции

Я использую NextJS с Shadcn. Я пытаюсь отобразить командный компонент, содержащий динамическое количество элементов из базы данных.

Это фрагмент строки, которая не работает. Жесткое кодирование чисел работает нормально, но использование переменных не влияет на макет.

 <CommandList className = {`min-h-[calc(${favProjects.length * 50}px+${recentProjects.length * 50}px)]`}>

Вот полный код контекста.

import {
    CalendarIcon,
    EnvelopeClosedIcon,
    FaceIcon,
    GearIcon,
    PersonIcon,
    RocketIcon,
} from "@radix-ui/react-icons"

import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut,
} from "@/components/ui/command"

export function TopNavMenuProjects() {
    const favProjects = [
        {
            id: 1,
            name: "Project 1",
        },
        {
            id: 2,
            name: "Project 2",
        },
        {
            id: 3,
            name: "Project 3",
        },
    ]

    const recentProjects = [
        {
            id: 4,
            name: "Project 4",
        },
        {
            id: 5,
            name: "Project 5",
        },
        {
            id: 6,
            name: "Project 6",
        },
    ]
    return (
        <Command className = "rounded-lg border shadow-md h-full">
            <CommandInput placeholder = "Search ..." />
            <CommandList className = {`min-h-[calc(${favProjects.length * 50}px+${recentProjects.length * 50}px)]`}>
                <CommandEmpty>No results found.</CommandEmpty>
                <CommandGroup heading = {`Favourites (${favProjects.length})`}>
                    <CommandItem>
                        {/* <CalendarIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 1</span>
                    </CommandItem>
                    <CommandItem>
                        {/* <FaceIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 2</span>
                    </CommandItem>
                    <CommandItem>
                        {/* <RocketIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 3</span>
                    </CommandItem>
                </CommandGroup>
                <CommandSeparator />
                <CommandGroup heading = "Recent">
                    <CommandItem>
                        {/* <PersonIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 4</span>
                        {/* <CommandShortcut>⌘P</CommandShortcut> */}
                    </CommandItem>
                    <CommandItem>
                        {/* <EnvelopeClosedIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 5</span>
                        {/* <CommandShortcut>⌘B</CommandShortcut> */}
                    </CommandItem>
                    <CommandItem>
                        {/* <GearIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project 6</span>
                        {/* <CommandShortcut>⌘S</CommandShortcut> */}
                    </CommandItem>
                </CommandGroup>
                <CommandGroup heading = "More Projects">
                    <CommandItem>
                        {/* <PersonIcon className = "mr-2 h-4 w-4" /> */}
                        <span>Project Dashboard</span>
                        {/* <CommandShortcut>⌘P</CommandShortcut> */}
                    </CommandItem>
                </CommandGroup>
            </CommandList>
        </Command>
    )
}

Я сомневаюсь, что проблема связана именно с shadcn, но я новичок в реагировании, поэтому не хочу ничего исключать.