React-Admin RichTextInput with TipTap with Image extension not working

I want to insert on my RichTextInput component on React-Admin, but that is not working.
Even the example on the docs about using HorizontalRules are not working too. The button doesn't work, and by default ra-input-rich-text already have HorizontalRules extension, it works if I input "---" on the text.

What I want exactly is put the image url with a button on my toolbar and it would be inserted where my cursor is on the editor. But even manually putting the tag (as <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />), the image is not rendered.

This is my current RichTextInput component:

import {
    DefaultEditorOptions,
    RichTextInput,
    RichTextInputToolbar,
    LevelSelect,
    FormatButtons,
    AlignmentButtons,
    ListButtons,
    LinkButtons,
    QuoteButtons,
    ClearButtons
} from 'ra-input-rich-text';
import { ToggleButton } from '@mui/material';
import { useEditor } from '@tiptap/react'
import Image from '@tiptap/extension-image'
import Remove from '@mui/icons-material/Remove';

import { Box } from '@mui/material';

export const MyRichTextInput = ({ size, ...props }) => {
    const editor = useEditor(MyEditorOptions)
    return (
        <RichTextInput
            editorOptions={MyEditorOptions}
            toolbar={
                <RichTextInputToolbar>
                    <Box sx={{
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                    }} >
                        <LevelSelect size={size} />
                        <FormatButtons size={size} />
                        <AlignmentButtons size={size} />
                        <ListButtons size={size} />
                        <LinkButtons size={size} />
                        <QuoteButtons size={size} />
                        <ClearButtons size={size} />
                    </Box>
                    <ToggleButton
                    value="Image"
                    aria-label="Add an image"
                    title="Add an image"
                    onClick={() => editor.chain().focus().setImage({ src: url }).run()}
                    selected={editor && editor.isActive('image')}
                >
                    <Remove fontSize="inherit" />
                </ToggleButton>
                </RichTextInputToolbar>
            }
            label="Body"
            source="body"
            {...props}
        />
    )
}

export const MyEditorOptions = {
    ...DefaultEditorOptions,
    extensions: [
        ...DefaultEditorOptions.extensions,
        Image
        
    ],
};

What I need to put an image and this be rendered here and in the "RichTextField"? And how to create a button to ask me the url and insert the image on the editor?

They updated React Admin (I was using 4.15) to 4.20 and now it supports Image and horizontal line. And now the toolbar is responsive.

Mor info in the issue: https://github.com/marmelab/react-admin/issues/7806