HeroUI Version

2.8.5

Describe the bug

State changes inside a Modal component are not reflected in the UI. The React state updates correctly (verified via console.log), the component re-renders with the new state value (verified via console.log at render time), but the DOM elements inside the Modal do not visually update.

This affects:

• Native HTML <input type="checkbox"> elements (checked state doesn't visually change)
• Native HTML <input type="text"> elements (typed characters don't appear)
• HeroUI <Input> components (same issue)
• HeroUI <Checkbox> components (same issue)
• Loading state of Button, etc.

I found this issue before:
#3565 (related issue from 2.4.6, same symptoms)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a component with a Modal using useDisclosure
2. Add a useState hook for any value (e.g., const [checked, setChecked] = useState(false))
3. Inside ModalBody, add a native checkbox: <input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked)} />
4. Add console.log to verify: in onChange handler and at component render level
5. Open the modal and click the checkbox
6. Observe: console shows state changed to true and component re-rendered with checked: true, but the checkbox remains visually unchecked

Minimal reproduction code:

"use client"
import { Modal, ModalContent, ModalBody, Button, useDisclosure } from "@heroui/react"
import { useState } from "react"

export default function BugDemo() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [checked, setChecked] = useState(false)
  
  console.log("Render - checked:", checked) // Shows true after click
  
  return (
    <>
      <Button onPress={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
        <ModalContent>
          <ModalBody>
            <label>
              <input
                type="checkbox"
                checked={checked}
                onChange={(e) => {
                  console.log("Changed:", e.target.checked) // Shows true
                  setChecked(e.target.checked)
                }}
              />
              Check me
            </label>
            <p>State value: {checked ? "true" : "false"}</p>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  )
}

Expected behavior

As a user, I expected the checkbox to visually show as checked when I click it (and the state updates to true), but I am seeing the checkbox remain visually unchecked despite the React state correctly updating to true and the component re-rendering.

The <p> tag showing "State value: true/false" should also update - if it doesn't, this confirms the Modal is not reflecting any state changes in its DOM.

Screenshots or Videos

No response

Operating System Version

Linux, NixOS 25.11

Browser

Other (add additional context)