How to make SlateJS editor look like a MUI TextField?

Question

I am using slate-react in an app based on Material Design, using MUI.

What I want is for the Slate editor to look like an MUI TextField -- essentially with the shrinked label on top and a border.

Something like this would be enough:

(no need for the label to animate-shrink on focus, it can be shrinked by default)

I see the Editable component from slate-react has a as prop that takes a component as input.. but I cannot make it work by passing BaseInput..

I was thinking something like this would have worked:

<FormControl>
    <InputLabel shrink={true}>LABEL</InputLabel>
    <Slate ...>
       ...
       <Editable as={InputBase} />
    </Slate>
</FormControl>

But obviously it does not work.. any suggestion?