react、tailwindcssを使用したハンバーガーメニューがうまく動作しない

実現したいこと

下記のリンクのプレビューにあるハンバーガーメニューのアニメーションを
レスポンシブデザインにしてローカルで実現したいです。
https://inari-tech.net/components/burger

前提

バージョン情報：
react：18
tailwindcss：3.4.1
tailwindcss-merge：2.4.0
clsx：2.1.1
ここに質問の内容を詳しく書いてください。
実現したいところにあるリンクでハンバーガーメニューのサンプルがあるので、
ハンバーガーメニューのアイコンとアニメーションを維持しつつ、
レスポンシブデザインにしたいと考えています。
ただローカルで実施してみるとエラーは出ていませんが、
ハンバーガメニューのアイコンが出ないのとアニメーションが動作していませんでした。
現在考えられる原因としてはclsx内で[]を使用しているときのみ、
この現象が出ているのでこちらが原因かと考えています。
ただ実現したいところに貼ってあるリンクでは動作しているので
これらの原因が何かわかる方いれば教えていただけないでしょうか？

発生している問題・エラーメッセージ

・ハンバーガーメニューのアイコンが出てこない。
・アニメーションが動作しない。

該当のソースコード

ハンバーガーメニューのコンポネント（文字数の都合上変更したところのみ記述）：

react
1export const BurgerIcon = ({
2  open,
3  setOpen,
4  size = 30,
5  borderWidth = 2,
6  borderColor = "#000",
7  className = "",
8}: BurgerIconType) => {
9  const height = size * 0.65;
10  const common = "w-full h-[2] absolute m-auto pointer-events-none";
11  return (
12    <div
13      className={cn(`burger-wrapper z-[9999] cursor-pointer p-1.5`, className)}
14      onClick={() => setOpen(!open)}
15    >
16      <div
17        className={cn(
18          `w-10 h-25 burger relative flex cursor-pointer flex-col justify-between`,
19        )}
20      >
21        <span
22          className={cn(
23            common,
24            open
25              ? `rotate-[45deg] top-[${height / 2}px] [transition:transform_300ms_350ms,top_300ms_50ms]`
26              : `top-[0px] [transition:transform_300ms_50ms,top_300ms_350ms]`,
27          )}
28          style={{ backgroundColor: borderColor }}
29        />
30        <span
31          className={cn(
32            `top-[${height / 2}px] ease transition-opacity duration-200`,
33            common,
34            open ? "opacity-0 delay-&lsqb;0ms&rsqb;" : "opacity-100 delay-&lsqb;600ms&rsqb;",
35          )}
36          style={{ backgroundColor: borderColor }}
37        />
38        <span
39          className={cn(
40            common,
41            open
42              ? `rotate-[-45deg] top-[${height / 2}px] [transition:transform_300ms_350ms,top_300ms_50ms]`
43              : `top-[${height}px] [transition:transform_300ms_50ms,top_300ms_350ms]`,
44          )}
45          style={{ backgroundColor: borderColor }}
46        />
47      </div>
48    </div>
49  );
50};
51
52export const BurgerMenu = ({
53  menu,
54  open,
55  setOpen,
56  width = 300,
57  backgroundColor = "#fff",
58  className = "",
59  direction = "left",
60}: BurgerMenuType) => {
61  useEffect(() => {
62    document.body.classList.add("[transition:margin_300ms_0ms]");
63  }, []);
64  useEffect(() => {
65    if (open) {
66      document.body.classList.add("overflow-hidden");
67      if (direction === "right") {
68        document.body.classList.add(`ml-[-${width}px]`);
69      } else {
70        document.body.classList.add(`ml-[${width}px]`);
71      }
72    } else {
73      document.body.classList.remove("overflow-hidden");
74      if (direction === "right") {
75        document.body.classList.remove(`ml-[-${width}px]`);
76      } else {
77        document.body.classList.remove(`ml-[${width}px]`);
78      }
79    }
80  }, [open]);
81  return (
82    <div
83      className={cn(
84        "[transition:opacity:300ms_0,visibility_300ms_0] fixed left-0 top-0 h-[100vh] w-[100vw]",
85        open
86          ? "visible opacity-100 delay-&lsqb;0ms&rsqb;"
87          : "invisible opacity-0 delay-&lsqb;300ms&rsqb;",
88        className,
89      )}
90    >
91      <div
92        className={cn(
93          "fixed left-0 top-0 z-[999] h-[100vh] w-[100vw] backdrop-blur transition-opacity duration-&lsqb;300ms&rsqb;",
94        )}
95        onClick={() => setOpen(!open)}
96      />
97      <div
98        className={cn(
99          `h-[100vh] overflow-y-scroll w-[${width}px] bg-[${backgroundColor}] absolute z-[9999] shadow-[0_6px_30px_-4px_rgba(17,33,95,0.2)] [transition:left_300ms_0ms,right_300ms_0ms] `,
100          open
101            ? direction === "left"
102              ? `left-[0px]`
103              : `right-[0px]`
104            : direction === "left"
105              ? `left-[-${width}px]`
106              : `right-[-${width}px]`,
107        )}
108      >
109        <nav className="p-4 pt-[60px]">
110          <ul className="flex flex-col gap-3">
111            {menu.map((e: any, key: number) => {
112              if (e.isParent) {
113                return (
114                  <Accordion
115                    key={e.id}
116                    title={e.title}
117                    children={e.children}
118                    className={`[transition:opacity_400ms_${key * 50 + 150}ms,margin_400ms_${key * 50 + 150}ms]`}
119                    open={open}
120                  />
121                );
122              }
123              return (
124                <MenuLink key={e.id} title={e.title} href={e.href} num={e.id} open={open} />
125              );
126            })}
127          </ul>
128        </nav>
129      </div>
130    </div>
131  );
132};

ハンバーガメニューを呼び出す側：

react
1
2const menu: MenuType = [
3    { id:0, title: "TOP", href: "#" },
4    { id:1, title: "NEWS", href: "#" },
5    { id:2, title: "ARTICLE", href: "#" },
6  ];
7
8export default function Header () {
9    const [open, setOpen] = React.useState(false);
10    return (
11        <div className="flex min-h-[100vh] min-w-[100vw] flex-col">
12            <header className="relative flex w-[100vw] justify-center border-b-[1px] p-3">
13                <BurgerIcon
14                    key="Icon"
15                    open={open}
16                    setOpen={setOpen}
17                    size={40}
18                    borderWidth={2}
19                    className="fixed left-3 top-3 z-999"
20                />
21                <h1 className="text-xl md:text-2xl lg:text-3xl font-black text-center flex-1">INARI TECH</h1>
22                <div className="flex gap-5 pr-3">
23
24                </div>
25            </header>
26            {/* モバイル用のメニュー */}
27            <BurgerMenu open={open} setOpen={setOpen} menu={menu} />
28            {/* デスクトップ用のメニュー */}
29            <nav className="hidden md:flex justify-center gap-6 py-4">
30              {menu.map((item, index) => (
31                item.isParent ? (
32                  <div key={`${item.id}-${index}`} className="relative group">
33                    <span className="text-lg font-medium">{item.title}</span>
34                    <div className="absolute hidden group-hover:block bg-white shadow-md">
35                      {item.children.map((child, childIndex) => (
36                        <a key={`${child.id}-${childIndex}`} className="block px-4 py-2 hover:bg-gray-100">
37                          {child.title}
38                        </a>
39                      ))}
40                    </div>
41                  </div>
42                ) : (
43                  <a key={`${item.id}-${index}`} href={item.href} className="text-lg font-medium hover:underline">
44                    {item.title}
45                  </a>
46                )
47              ))}
48            </nav>
49        </div>
50    )
51}

試したこと

ここに問題に対して試したことを記載してください。
ソースコード内に下記の記述があると思います。
「h-[2]」に関して[]を外すとハンバーガーメニューアイコンの線が出るようになります。
そのため、[]が原因かと考えています。
const common = "w-full h-[2] absolute m-auto pointer-events-none";