Error while using Component Blocks

While trying out Component Blocks I wanted to use different [Form Fields](https://keystonejs.com/docs/guides/document-fields#form-fields).
In the file `component-blocks.tsx` I have the following code to use a normal text field (`fields.text()`).

```js
import React from 'react';
import { NotEditable, component, fields } from '@keystone-6/fields-document/component-blocks';

export const componentBlocks = {
test: component({
component: ({ text }) => {
return (

);
},
label: 'Test',
props: {
text: fields.text({ label: 'Label...', defaultValue: 'defaultText' }),
},
chromeless: false,
}),
```

If I click next to the default placeholder Text (_defaultText_) I get the following error (see video [`error-with-text-form-field.mov`](https://user-images.githubusercontent.com/9418314/161144253-75a7f5e3-df9c-4321-95cb-42ecb3e0cfa9.mov)):
```
Unhandled Runtime Error
Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0
```

Sometimes even the whole app crashes (see video [`error-2-big-crash.mov`](https://user-images.githubusercontent.com/9418314/161144286-e0b72c52-84b7-451c-b6a3-3db0affa5e38.mov)) showing me the following error:
```
Unhandled Runtime Error
Error: Cannot resolve a DOM node from Slate node: {"text":""}
```

https://user-images.githubusercontent.com/9418314/161144253-75a7f5e3-df9c-4321-95cb-42ecb3e0cfa9.mov

https://user-images.githubusercontent.com/9418314/161144286-e0b72c52-84b7-451c-b6a3-3db0affa5e38.mov