TransformWrapper and TransformComponent have 0 width and height, inside modal. Next Image, Tailwind CSS and Daisy UI

[ritvij14]

Describe the bug
I am using this package in my project, where I am using NextJS 14 with Tailwind and Daisy UI.

I am using the component inside a dialog element to show a zoom-able image inside a modal interface.

Code I used:

<dialog id="image_modal" className="modal">
        <div className="modal-box relative overflow-hidden p-0 min-w-[90vw] bg-white max-w-[90vw] min-h-[90vh] max-h-[90vh] h-fit">
          <TransformWrapper>
            <TransformComponent
              wrapperStyle={{
                height: "100%",
                width: "100%",
              }}
              contentStyle={{
                height: "100%",
                width: "100%",
              }}
            >
              <Image
                fill
                key={selectedImage}
                src={
                  selectedImage !== undefined
                    ? images[selectedImage]
                    : images[0]
                }
                alt=""
                className="h-full w-full object-cover"
                sizes="100%"
              />
            </TransformComponent>
          </TransformWrapper>
        </div>
        <form method="dialog" className="modal-backdrop">
          <button>close</button>
        </form>
      </dialog>

Current behavior
I see an empty modal with no content, and when I use inspect element, the elements code shows me the transform wrapper and component as elements wit 0 width or height.

Expected behavior
A zoom-able image of the given size which covers as much of the screen as is covered by the dialog modal.

Desktop (please complete the following information):

• OS: macOS
• Browser: Arc Browser

Additional context
Add any other context about the problem here.