Controlled (Modal.Root) modal throws an error

[cosmic spire]

import {Button, Group, Modal } from '@mantine/core';


const TestModal = ({opened, open, close}) => {


    return (
        <>
            <Modal.Root opened={opened} onClose={close}>
                <Modal.Overlay />
                <Modal.Content>
                    <Modal.Header>
                        <Modal.Title>Modal title</Modal.Title>
                        <Modal.CloseButton />
                    </Modal.Header>
                    <Modal.Body>Modal content</Modal.Body>
                </Modal.Content>
            </Modal.Root>

            <Group position="center">
                <Button onClick={open}>Open modal</Button>
            </Group>
        </>
    );};

I am trying to create a modal with custom elements inside it's header and see this error near every Modal.****:
TS2339: Property 'Root' does not exist on type 'typeof Modal'. I am using typescript 4.9.3

Also, I wanted to ask if it's possible to set custom html elements inside this modal parts. For example, two images in header, or to change close button styles completely?

[heavy saddle]

What version of Mantine are you using?

[cosmic spire]

6.0.8

[cosmic spire]

🥲