WithSpring along with UseSharedValue react -native-reanimated, react-native-gesture-handler

Question

What I am trying to achieve is that when release the box i want it to be in the center and i want a smooth animation but using withSpring inside the animated Value "offset" crashes the app

My code is:

import React from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import {GestureDetector, Gesture} from 'react-native-gesture-handler';

const SIZE = 100.0;
export default function GestureAnimations() {
  const isPressed = useSharedValue(false);
  const offset = useSharedValue({translateX: 0, translateY: 0});
  const panGestureEvent = Gesture.Pan()
    .onBegin(event => {
      //   'worklet';
      isPressed.value = true;
    })
    .onChange(event => {
      //   'worklet';
      offset.value = {
        translateX: event.changeX + offset.value.translateX,
        translateY: event.changeY + offset.value.translateY,
      };
    })
    .onEnd(event => {
      offset.value = {
        translateX: withSpring(0),
        translateY: withSpring(0),
      };
      isPressed.value = false;
    });

  const rStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {translateX: offset.value.translateX},
        {translateY: offset.value.translateY},
        {scale: withSpring(isPressed.value ? 1.2 : 1)},
      ],
      backgroundColor: isPressed.value
        ? 'rgba(0, 0, 256, 0.5)'
        : 'rgba(176, 64, 64, 0.5)',
    };
  });

  return (
    <View style={styles.container}>
      <GestureDetector gesture={panGestureEvent}>
        <Animated.View style={[styles.square, rStyle]} />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: SIZE,
    height: SIZE,
    backgroundColor: 'rgba(0, 0, 256, 0.5)',
    borderRadius: SIZE / 4,
  },
}); 

i can see that it is crashing at .onEnd of Gesture.Pan()

offset.value = {
        translateX: event.changeX + offset.value.translateX,
        translateY: event.changeY + offset.value.translateY,
      };

but i am not able to find how it should be handled, one way i know is by using two different useSharedValue

What i have also tried is

offset.value = withSpring({
    translateX: 0
    translateY: 0,
  });

which is also not working