When I provide the size as a percentage string, drawer is not animated and not closable about open-sesame HOT 5 CLOSED

  // Animation properties for framer-motion
  let initial, animate;
  switch (props.origin) {
    case "left":
      initial = { x: -window.innerWidth };
      animate = { x: 0 };
      break;
    case "right":
      initial = { x: window.innerWidth };
      animate = { x: 0 };
      break;
    case "top":
      initial = { y: -window.innerHeight };
      animate = { y: 0 };
      break;
    case "bottom":
      initial = { y: window.innerHeight };
      animate = { y: 0 };
      break;
  }

        <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
          <Drawer.Trigger>
            <div
              className={
                "drawer " +
                (designDirection === "rtl"
                  ? "rightsidedrawer rtl:rotate-180"
                  : "leftsidedrawer")
              }
            >
              <img src={drawerIcon} />
            </div>
          </Drawer.Trigger>
          <Drawer.Content
            className="content"
            origin={designDirection === "rtl" ? "right" : "left"} // Where the drawer opens from
            radius={10} // Border radius of the drawer
            size={"50%"} // Depth of the drawer
            visible={drawerOpen} // Required for animation
            style={{ paddingTop: "30px" }}
          >
            <Drawer.Title></Drawer.Title>
            <ReadOnlyViewWrapper />
          </Drawer.Content>
        </Drawer.Root>