How to render custom TextInput or RangeDatePicker instead of common Control

[Estasie]

At my project I need to use RelativeRangeDatePicker with custom input render to have ability change date manually at TextInput field (or at RangeDatePicker - it is much more comfortable with it's mask for date).
I have a problem now, because I can't even enter a number into custom rendered Input.
A simple repro:

Expected result:
I can render different node throw renderControl not loosing it's ux and RelativeRangeDatePicker modal functionality which we see on focus.

[ValeraS]

Try something like this:

const [text, setText] = React.useState('');
return (
    <RelativeRangeDatePicker
        {...props}
        renderControl={({open, title, triggerProps, ref}) => {
            return (
                <TextInput
                    ref={ref}
                    value={open ? title : text}
                    onUpdate={setText}
                    readOnly={open}
                    endContent={
                        <Button size="s" component="button" {...triggerProps} extraProps={{...triggerProps}}>
                            <Icon data={Calendar} />
                        </Button>
                    }
                />
            );
        }}
    />
);

[Estasie]

I still can't change the input value, when it's "focused" (the picker modal appears)
First of all, I need to render formatted text, when picker open.
value={open ? text : title}

And need to render picker when I click into TextInput. As I had mentioned at the issue below (second picture) Can edit the input and use modal functionality. Modal should appear not only when I click calendar button, but when I focus the input
@ValeraS

[ValeraS]

then try to use dialog itself :

function DatePicker(props) {
        const state = useRelativeRangeDatePickerState(props);
        const [open, setOpen] = React.useState(false);
        const [text, setText] = React.useState('');
        const ref = React.useRef<HTMLElement>(null);

        return (
            <React.Fragment>
                <TextInput
                    ref={ref}
                    value={text}
                    onUpdate={setText}
                    onFocus={() => {
                        setOpen(true);
                    }}
                />
                <RelativeRangeDatePickerDialog
                    anchorRef={ref}
                    props={props}
                    state={state}
                    open={open}
                    onClose={() => {
                        setOpen(false);
                    }}
                    // added in 2.12.0
                    disableFocusTrap
                />
            </React.Fragment>
        );
},