Tailwind height from array not working in Next.js

I’m using Next.js with Tailwind CSS. I have an array of objects and I map over it to render sections. Each item has a height value that should control the Tailwind height class.

const segments = [ { height: "screen", }, { height: "[200vh]", }, ];

And I do:

<div className={`h-${segment.height}`}> ... </div>

This works only when height is "screen" (h-screen works), but values like "[100vh]" (h-[100vh]) do not work.

I expected h-[100vh] to be generated correctly, but Tailwind doesn’t apply the style.

but when I don't load height dynamically (classname="h-[100vh]"), it works

I don't know what is causing this. Here is the codesandbox: https://codesandbox.io/p/devbox/6lxqmq