Pointer Lock but without message like in Figma when dragging to set width

Question

Edit: Question is resolved. See my first comment.

I'm looking to achieve some pointer lock behaviour like this but without the Press [esc] to show your cursor message, or via some hacky workaround or illusion of doing the same.

Demo: https://mdn.github.io/dom-examples/pointer-lock/

I know this is a security feature to show the message, but in Figma, you can do this exact thing when dragging any numerical property on the right sidebar to change the width of a rectangle for example.

From what I can see, they create a synthetic fake mouse using a div and svg to imitate the actual mouse and use translateX to move it. This is achievable.

However, on mouseUp, the actual mouse cursor reappears in its original position as if it was locked the whole time. How do they do this?

1. I thought they used the pointerLock API but there is no Press [esc] to show your cursor message in Figma when dragging to change the width, so they must not be using this, since that message is required AFAIK

2. If not using the pointerLock API, how can you make it so that either the mouse gets locked in some position in Javascript, or gets moved back to its original position in Javascript?

I understand there are many security implications for not being able to control the mouse so "it's not possible", except the illusion of this is possible because Figma does it somehow. Any ideas?

Edit: Upon further investigation, that message shows up once sometimes in Figma but not again after dragging multiple times. I guess my new question is, how can I make it appear only once? I'm using Google Chrome.

In the demo in the link above, it appears every time