react-konva get <Group/> attributes in sub component declaration - reactjs

Question

I used a react-konva Group with 3 Rect shapes inside it - they are all displayed at the same place and the only difference is their width so i can get some sort of a multi-color process bar.
This is my current code:
import React from 'react';
import {Group, Rect, Text} from 'react-konva';
import Konva from 'konva'
export function functionalTaskContainer(properties) {
function handleDragStart(e, properties) {
e.target.setAttrs({
width: ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10,
shadowOffset: {
x: 15,
y: 15
},
scaleX: 1.1,
scaleY: 1.1
});
}
function findWhereToLand(x, firstCellWidth, cellWidth) {
let cell = 0;
while (x > firstCellWidth + cell * cellWidth) {
cell++;
}
return cell;
}
function handleDragMove(e, properties) {
e.target.children.forEach((child) => {
if (child.className === "Rect") {
switch (child.getAttr("name").split(' ')[0]) {
case "mainRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10
});
break;
case "workingRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5) * properties.cellWidth) - 10) * (properties.percentageDone + properties.percentageWorking)
});
break;
case "doneRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5) * properties.cellWidth) - 10) * properties.percentageDone
});
break;
default:
break;
}
}
});
e.target.setAttrs({
y: (properties.row + 1) * properties.cellHeight
});
}
function handleDragEnd(e, properties) {
console.log(e);
properties.changeWeekHandler(findWhereToLand(e.target.attrs.x, properties.firstCellWidth, properties.cellWidth));
e.target.to({
duration: 0.05,
easing: Konva.Easings.EaseIn,
scaleX: 1,
scaleY: 1,
shadowOffsetX: 5,
shadowOffsetY: 5
});
}
return (
<Group
key={"container-" + properties.row}
x={properties.col > 0 ? (properties.firstCellWidth + (properties.col - 1) * properties.cellWidth) : 0}
y={(properties.row + 1) * properties.cellHeight}
draggable={properties.draggable || false}
onDragStart={(e) => handleDragStart(e, properties)}
onDragMove={(e) => handleDragMove(e, properties)}
onDragEnd={(e) => handleDragEnd(e, properties)}>
<Rect
name={"mainRect of " + properties.row}
x={5}
y={5}
width={properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10}
height={properties.cellHeight - 10}
fill="#5BC0EB"
shadowBlur={10}
cornerRadius={5}
/>{/* blue general block*/}
<Rect
name={"workingRect of " + properties.row}
x={5}
y={5}
width={(properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10) * (properties.percentageDone + properties.percentageWorking)}
height={properties.cellHeight - 10}
fill="#FDE74C"
cornerRadius={5}
/>{/* yellow working progress*/}
<Rect
name={"doneRect of " + properties.row}
x={5}
y={5}
width={(properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10) * properties.percentageDone}
height={properties.cellHeight - 10}
fill="#9BC53D"
cornerRadius={5}
/>{/* green done progress*/}
<Text
x={15}
y={15}
text={properties.containerName}
fill={"white"}
fontFamily={'david'}
fontStyle={'bold'}
shadowBlur={5}
fontSize={20}
/>
</Group>
)
}
For dragging events I would find it way more simple to set a single attribute to the group object and then use it when constructing the sub Shapes. But I can't find the syntax to do that.
what I am trying to do is something like:
<Group
key={"container-" + properties.row}
width={SomeValue}
x={properties.col > 0 ? (properties.firstCellWidth + (properties.col - 1) * properties.cellWidth) : 0}
y={(properties.row + 1) * properties.cellHeight}
draggable={properties.draggable || false}
onDragStart={(e) => handleDragStart(e, properties)}
onDragMove={(e) => handleDragMove(e, properties)}
onDragEnd={(e) => handleDragEnd(e, properties)}>
<Rect
name={"mainRect of " + properties.row}
x={5}
y={5}
width={properties.col === 0 ? properties.firstCellWidth - 10 : this.parent.getAttr("width") - 10}
height={properties.cellHeight - 10}
fill="#5BC0EB"
shadowBlur={10}
cornerRadius={5}
/>{/* blue general block*/}
</Group>
Is there a way to do?