Problem when rotating a canvas element and then trying to resize it with interactjs

Question

I'm working in Angular using interactjs to create canvas elements. The drag and drop works perfectl fine, and rotating and resizing the element works fine separately, but as soon as I rotate the element first and then try to resize it, everything goes wrong. It seems like the x and y axis are not being set properly bc for example, when the element is rotated 90 degrees and you try to resize the top part, the element changes the top part for the left or right part(not sure) but it looks like you've rotated the element again. To make the rotation im using

elem.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad) `;

where x and y are the center of the object and angle is how rotated the element should be in radians.

I've tried using matrix instead of rotate but it doesn't seem to work. I also tried to rotate first and translate later but it just makes the problem worse. If it's worth to mention, the resize and rotate features are both directives. The rotation directive is being applied in the child component while the resize directive in the parent

<bdr-draggable-element
...
bdrResizable
...
>
</bdr-draggable-element>

bdr-draggable-element has this inside:

<div
    class="drag-elem__rotation-button"
    bdrRotation>
...
</div>

I'm almost sure the problem is related to the x and y axis positions after being rotated, but not really sure how to solve the issue. If you need more details, feel free to reach out