CSS conflicting transform properties on same element

I am designing a UI that allows the user to drag and drop a box (red outline) to determine its position on the screen (black box).

UI

It can also be moved by changing the inputs on the right.

I am using Angulars cdkDrag for the drag and drop functionality which applies a

transform: translate3d(x, y, z)

to move the box (i use the event listener to update the input values on the right).

When a user input is applied I update this property depending on the input.

Unfortunately, when the box is dragged again, Angular reapplies a translate3d creating two properties that are conflicting with each other, creating terrible UX when dragging after user input.

two transform properties

Is there a way around this?

Turns out, there is a way to set the drag position of the element manually. Which in my case I can do on user input.

[cdkDragFreeDragPosition]="dragPosition"

dragPosition = {x: 50, y: 100};

This maintains a single translate property and creates a smooth UX