Click events are not registering in document field custom component block toolbar

[flexdinesh]

Click events are not registering within ToolbarGroup component in custom component blocks in the document field. I think this is a bug with either the latest release or the one before that.

If you debugged with console.log() within the onClick handler, you'll notice that the handler is not invoked.

import { component } from '@keystone-6/fields-document/component-blocks';
import {
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from '@keystone-6/fields-document/primitives';
...

export const callout = component({
  ...
  toolbar: function Toolbar({ props, onRemove }) {
    return (
      <ToolbarGroup>
        {props.fields.intent.options.map(opt => {
          return (
            <ToolbarButton
                onClick={() => {
                console.log("this handler won't be invoked");
                props.fields.intent.onChange(opt.value);
                }}
            >
                {opt.value}
            </ToolbarButton>
          );
        })}

        <ToolbarSeparator />

        <Tooltip content="Remove" weight="subtle">
          {attrs => (
            <ToolbarButton variant="destructive" onClick={onRemove} {...attrs}>
              <Trash2Icon size="small" />
            </ToolbarButton>
          )}
        </Tooltip>
      </ToolbarGroup>
    );
  },
});

https://user-images.githubusercontent.com/5777880/187125781-4314ed25-df48-42aa-8237-a001b96c8ac4.mp4

"@keystone-6/fields-document": "^4.0.0"