I have this modal component:

import {
  Modal,
  ModalContent,
  ModalBody,
  ModalFooter
} from "@heroui/modal";
import { Button } from "@nextui-org/button" <Modal
            isOpen={true}
            isDismissable={false}
            hideCloseButton={true}
            >
                <ModalContent className='bg-white pt-4 pb-2'>
                    <>
                    <ModalBody>
                        <p className='text-center'>
                        Konto zostało zweryfikowane.
                        </p>
                    </ModalBody>
                    <ModalFooter className='flex flex-row justify-center items-center gap-4'>
                        <Button className='bg-purchaseButton font-semibold text-white
                        hover:brightness-110 transition ease-in-out duration-200
                        px-8'
                        onPress={() => router.replace('/sign-in')}>
                        OK
                        </Button>
                    </ModalFooter>
                    </>
                </ModalContent>
            </Modal>

But the only thing that shows up in the browser is the text in <p></p>. Here are the deps that I'm using for it:

├── @heroui/modal@2.2.11
├── @heroui/system@2.4.15
├── @heroui/theme@2.4.15
├── @nextui-org/button@2.2.9
├── @nextui-org/system@2.4.6
├── @nextui-org/theme@2.4.5