How to set cropbox position dynamically in jQuery cropper.js

Question

I'm using cropper.js as a image highlighter. Initial load cropbox placed correct position on the image. When I try to zoom in/out/move the image, it can happen. But cropbox position not changed based on the event. It also need to get change based on zoom in zoom out image.

Expectations: When I zoom image, cropbox also need to zoom. When I move(pan) image, cropbox also need to move.

var image = document.querySelector('#image');
var cropper = new Cropper(image, {
dragMode: 'move',
aspectRatio: 16 / 9,
autoCropArea: 0.35,
restore: false,
guides: false,
center: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
});
});

Please help on this. Thanks in advance.