React FabricJS Grouping (JSX) - reactjs

Question

NPM Package: https://www.npmjs.com/package/react-fabricjs
I'm using react-fabricjs and have a canvas with some icons showing. I'm now trying to get Grouping to work but I can't work out the syntax. Essentially I want to create this effect but using React JSX Code:
http://jsfiddle.net/anwjhs2o/1/
This is the code I have:
import React from 'react';
import {Canvas, Circle, Image, Path, Text, Rect, Ellipse, Triangle, Group} from 'react-fabricjs';
export default class CanvasFabric extends React.Component {
render() {
return (
<Canvas
ref="canvas"
width="556"
height="371"
>
<Circle
ref="circle"
radius={20}
left={100}
top={50}
stroke="green"
fill="blue"
blur={100}
color="rgba(0,0,0,0.6)"
/>
<Image
src="https://cloudinary-a.akamaihd.net/bountysource/image/twitter_name/d_noaoqqwxegvmulwus0un.png,c_pad,w_200,h_200,b_white/fabricjs.png"
width={64}
height={48}
left={10}
top={50}
/>
<Rect
ref="rect1"
width={50}
height={50}
left={150}
top={150}
fill="orange"
shadow="rgba(0,0,0,0.3) 5px 5px 5px"
/>
<Rect
ref="rect2"
width={60}
height={60}
left={145}
top={145}
stroke="purple"
strokeWidth={2}
blur={20}
/>
<Ellipse
ref="ellipse"
width={20}
height={100}
offsetX={350}
offsetY={250}
stroke="orange"
strokeWidth={2}
fill="yellow"
/>
<Triangle
ref="tri"
width={20}
height={20}
left={350}
top={250}
stroke="orange"
strokeWidth={1}
fill="black"
opacity={0.3}
/>
<Text text="Edit me"
top={300}
left={10}
shadow="rgba(0,0,0,0.3) 5px 5px 5px"
stroke="#ff1318"
strokeWidth={1}
fontStyle="italic"
fontFamily="Hoefler Text"
/>
</Canvas>
)
}
}
How could I say group the 2 Rect's - so they can be rotated/scaled etc together?
thankyou
Adam
** Extra Note: I'm no React Expert but I get the feeling the Fabric React Package is far from completed and this is why core functionality doesn't work.

Answer 1

I tried to check the lib, i did not get how to use the group.
The main point is you should just use fabricJS in a normal way even if you are using reactJS. Binding a fabricjs render to a react render may be slow or just unnecessary.
The group code is using:
While the Group constructor in fabric is different.
You can try 2 approaches, the only 2 that makes sense in react:
<Group>
<Rect
ref="rect1"
width={50}
height={50}
left={150}
top={150}
fill="orange"
shadow="rgba(0,0,0,0.3) 5px 5px 5px"
/>
<Rect
ref="rect2"
width={60}
height={60}
left={145}
top={145}
stroke="purple"
strokeWidth={2}
blur={20}
/>
</Group>
OR
<Group
objects={[<Rect
ref="rect1"
width={50}
height={50}
left={150}
top={150}
fill="orange"
shadow="rgba(0,0,0,0.3) 5px 5px 5px"
/>,
<Rect
ref="rect2"
width={60}
height={60}
left={145}
top={145}
stroke="purple"
strokeWidth={2}
blur={20}
/>]}
/>