onClick in rendered component not working

[mikeycoxon]

Can anyone see what's wrong with this render?

export const RenderElement = ({
  attributes,
  children,
  element,
}: RenderElementProps) => {

  const editor = useSlate()
  const path = ReactEditor.findPath(editor, element)
  const selected = useSelected()
  const focused = useFocused()

  const style = { textAlign: element.align };

  switch (element.type) {

   // .... lots of other type options removed for brevity

    case "image": {
      console.log('its the Slatester, doing the render')
      console.log(path)
      return (
        <div {...attributes}>
          <div  contentEditable={false} style={{position: 'relative'}}>
            <img style={style} alt='' src={element.url} {...attributes} />
            <button type="button" 
              onClick={() => {
                Transforms.removeNodes(editor, { at: path })
                console.log('hit me')
              }}
              className='btn btn-danger'
              style={{
                display: selected && focused ? 'inline-block' : 'none',
                position: 'absolute',
                top: '5rem',
                left: '5rem',
                zIndex: 900
              }} >Delete</button>
          </div>
        </div>
      );
    }
    default: {
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      );
    }
  }
};

Its based on the example here:

https://github.com/ianstormtaylor/slate/blob/main/site/examples/ts/images.tsx

Basically, when you click on the button nothing happens - I never see the 'hit me' message.

The image is in slate JSON just before the render:

{"type":"image","url":"https://www.portplay.org/resources/event-edit/978-1-76358-980-3.png","children":[{"text":""}]}

I haven't stopped event propagation or anything. Just that there's seemingly no click event.

Is there some crucial step that I've missed? Some piece of enablement, not made clear in the images.tsx example?