Rotation of Entities using Orientation Property

Hello Community,

I am implementing a rotation tool for our tilesets. In order to implement the rotation I have added 3 ellipsoids representing each axis. (x (red), y (green), z (blue)). Using the maxcone and mincone made them look like rings and placed the ellipsoids at the tileset root position.

Please review the rotation tool in following image:

Now I want our users to select the ellipsoids and rotate the tileset. I am updating the modelMatrix of tileset to perform the rotation around local z axis.

As I select the z rotation, tilesets rotates however the x (red) and y (green) rings do not. This causes x and y not in sync with the respective local rotation.
Please review following gif:

We are using entity.orientation property to update heading pitch and roll for the tileset.
Can anyone help me what is the right way to calculate the orientation of these rings at any arbitray location?
We are using following code calculate the rotation:

const pos = Matrix4.getTranslation(data.tileset.modelMatrix, new Cartesian3);
const hpr = new HeadingPitchRoll(CesiumMath.toRadians(xAngle), CesiumMath.toRadians(yAngle), CesiumMath.toRadians(zAngle));

I am aware that I need to calculate the orientation of the rings as I am dragging the z rings(or any other ring for that matter. I am using callback property to calculate orientation per frame)

Can anyone help me figure out the right way to do this?

Thanks for the help.