React Konva: onClick() not firing in functional component - reactjs

Question

I am trying to create an onClick event on an image in a functional component which is the grand-child of the component where I have my Konva Stage.
However nothing seems to fire.
I have even tried putting the onClick on a div in the component with the stage. Still nothing.
The only way I can handle clicks is if I put an onMouseDown on my stage. But that is not practical in this instance, since I need the click to trigger a change in the grandchild component.
Why will nothing trigger?
Here is the code. I have cut away irrelevant code and functions.
Look in the PanelRect.js component to find the onClick() that is supposed to trigger the select() function.
First off, this is the grandparent, with the Konva stage.
Map.js
import React, { useState } from 'react';
import Konva from 'konva';
import { Stage, Layer, Image } from 'react-konva';
import { keyHandler, KEYPRESS } from 'react-key-handler';
import MapRoomRect from './MapRoomRect';
import { PanelRect } from './PanelRect';
const Map = () => {
return (
<section className='map'>
<h1>Projekt X</h1>
<div className='map_box'>
<div className='map_box_container' >
<div className='map_box_container_stage'>
<Stage name='Stage' width={stageWidth} height={stageHeight} onMouseDown={handleStageMouseDown} onKeyPress={handleKeyDown}>
<Layer
onMouseEnter={handleLayerMouseEnter}
onMouseLeave={handleLayerMouseLeave}
>
<MapRoomRect
name='MapRoomRect'
draggable
visible={false}
/>
<Image name='IconImage' draggable visible={false}/>
</Layer>
</Stage>
</div>
</div>
</div>
</section>
);
}
export default Map;
This is the parent component
MapRoomRect.js
import React from 'react';
import { Rect, Group, Image } from 'react-konva';
import useImage from 'use-image';
import { PanelRect } from './PanelRect';
const MapRoomRect = (props) => {
return (
<Group
name='RoomGroup'
roomType='RoomType'
id='0002'
onDragEnd={() => { }}
position={{ x: 200, y: 200 }}
draggable
visible={false}
size={{ width: roomSize, height: roomSize }}
>
<Rect
name='RoomGroupBackground'
size={{ width: roomSize, height: roomSize }}
opacity={0.3}
fill='red'
/>
<PanelRect
name='PanelGroup'
onDragEnd={() => { }}
size={{ width: iconSize, height: iconSize2 }}
x={0}
y={0} />
</Group>
)
}
export default MapRoomRect;
The child / grand-child component:
PanelRect.js
import React, { useState } from 'react';
import { Rect, Group, Image } from 'react-konva';
import useImage from 'use-image';
// Images
import backgroundImage from '../../images/tp6icon.png';
import iconTestImage from '../../images/lo1.png';
import iconTestImage2 from '../../images/lo2.png';
import iconTestImage3 from '../../images/lo3.png';
import iconTestImage4 from '../../images/lo4.png';
import iconTestImage5 from '../../images/lo5.png';
import MapContext from './MapContext';
const PanelRect = (props) => {
// Hooks
const [mapState, setMapState] = useState(mapContext);
let los = [0, 0, 0, 3, 4];
// Hooks
const [testImage] = useImage(iconTestImage);
const [testImage2] = useImage(iconTestImage2);
const [testImage3] = useImage(iconTestImage3);
const [testImage4] = useImage(iconTestImage4);
const [testImage5] = useImage(iconTestImage5);
var images = [testImage,testImage2,testImage3,testImage4,testImage5];
// Constants that does not change
const roomSize = 5;
const roomSize2 = 7;
const iconSize = 2;
const iconSize2 = 2;
const select = (e) => {
console.log('Hi! "e" is now: ' + e + ' hmmm');
}
return (
<Group
name='PanelGroup'
roomType='PanelType'
id='0003'
onDragEnd={() => { }}
position={{ x: 0, y: 0 }}
draggable
size={{ width: roomSize, height: roomSize2 }}
>
<Rect
name='PanelGroupBackground'
size={{ width: roomSize, height: roomSize2 }}
opacity={0.9}
fill='blue'
/>
<Image name='IconImage' lid='LO1' lo='0' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[0]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={0} y={0} />
<Image name='IconImage' lid='LO2' lo='1' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[1]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={2} y={0} />
<Image name='IconImage' lid='LO3' lo='2' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[2]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={0} y={2} />
<Image name='IconImage' lid='LO4' lo='3' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[3]]} size={{ width: iconSize, height: iconSize }} draggable={false} x={2} y={2} />
<Image name='IconImage' lid='LO5' lo='4' className='imageAnchor' onDragEnd={() => { }} onClick={() => {select()}} image={images[los[4]]} size={{ width: iconSize, height: iconSize2 }} draggable={false} x={0} y={4} />
</Group>
)
}
export { PanelRect }
I don't get any error messages or warnings. It's just that nothing happens when I click. No matter where I put the onClick().
Edit 7th aug 2019
I have created a sandbox that shows the problem.
Click "create red square"
Click on the red square.
Click "edit red square"
Click on the blue square inside
Click "edit blue square"
Click on the tiles with numbers on in the blue square.
It is the onClick() on these that I want to fire, and get access to the synthetic event object so I can access the target.
https://codesandbox.io/s/quirky-ramanujan-p53b9?fontsize=14