How do i responsively reposition a draggable React Component depending on changes of the viewport?

I am having some troubles regarding the use of a Component that can be dragged and automatically snaps to nine calculated points in the viewport (Corners: Upper Left, U. Right, Bottom Left, B. Right, as well as all Axis halway through and the center of the viewport) The draggable behaviour is achieved by using the useGesture Library. Works like a charm except for that i would like the component to adapt its position on changes of the viewport. For example the browser window being scaled down, it should always stay at the calculate point where it is snapped at the moment e.g. Bottom Middle of the screen.

Here is a pretty similar example i found, but with less snap-points, and also no responsive behaviour, but it illustrates what iam working with:
https://codesandbox.io/s/usepip-37cd9?file=/src/App.tsx:94-139

Please do not feel fooled by the rick astley gif, its not done by me 😀

Here is also how i adapted my code to snap to more than the corners:

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};

function usePip(ref) {
    const { height, width } = useWindowDimensions();

    const [styles, set] = useSpring(() => ({
        x: (width / 2 - 160),
        y: (height - 84),


    }));
    const bind = useDrag((_a) => {

        var { event, down, last, movement: [x, y], metaKey } = _a, rest = __rest(_a, ["down", "last", "movement", "metaKey"]);
        
        let defaultX = 10;
        let defaultY = 10;
        if (last && ref.current) {
            const rect = ref.current.getBoundingClientRect();

            if (rect.x + rect.width / 2 > window.innerWidth / 4) {
                defaultX = window.innerWidth / 2 - rect.width / 2;
            }
            if (rect.x + rect.width / 2 > window.innerWidth / 1.5) {
                defaultX = window.innerWidth - 10 - rect.width;
            }
            if (rect.y + rect.height / 2 > window.innerHeight / 4) {
                defaultY = window.innerHeight / 2 - rect.height / 2;
            }
            if (rect.y + rect.height / 2 > window.innerHeight / 1.5) {
                defaultY = window.innerHeight - 10 - rect.height;
            }
        }
        set({
            x: down || metaKey ? x : defaultX,
            y: down || metaKey ? y : defaultY,
            immediate: down
        });
    }, 
    { 
        initial: () => [styles.x.get(), styles.y.get()] ,
    },
 
        );

        
      
    return [bind, Object.assign(Object.assign({}, styles), { position: "fixed", left: 0, top: 0, zIndex: 99999 })];

also i am setting the inital position in a pretty messy way by using the measurements of the container divided by 2 in order to center align it. I would love to hear suggestions on how to improve that as well.

I thought about getting the rect.width and height outside of the useDrag function but i cant get it to work. Also i tried implementing using an window event listener but without success…

Please can somebody help me out here?