zoom issue

[AmitGunjan]

On Zoom view is getting hide behind the below view, is there is any way to overlap with top and bottom view after zoom.
Below are the code for pinch zoom

import React, { useRef, useState } from 'react';
import { Animated, Platform } from 'react-native';
import { PanGestureHandler, PinchGestureHandler, State } from 'react-native-gesture-handler';

const PinchZoom = ({ children }) => {
const baseScale = useRef(new Animated.Value(1)).current;
const pinchScale = useRef(new Animated.Value(1)).current;
const lastScale = useRef(1);
const pan = useRef(new Animated.ValueXY()).current;

const [enablePan, setEnablePan] = useState(false);

const onPinchGestureEvent = Animated.event(
[{ nativeEvent: { scale: pinchScale } }],
{ useNativeDriver: true }
);

const onPinchHandlerStateChange = ({ nativeEvent }) => {
if (nativeEvent.oldState === State.ACTIVE) {
pinchScale.setValue(1);
if(nativeEvent.scale > 1){
lastScale.current *= nativeEvent.scale;
}
else{
lastScale.current = 1;
}
baseScale.setValue(lastScale.current);

  // Enable pan when zooming starts
  if(lastScale.current != 1){
    setEnablePan(true);
  }
  else{
    setEnablePan(false);
  }
} else if (nativeEvent.oldState === State.END || nativeEvent.oldState === State.CANCELLED || (lastScale.current === 1 && nativeEvent.numberOfPointers === 1)) {
  // Disable pan when zooming ends
  setEnablePan(false);
}
else if(nativeEvent.numberOfPointers === 2)
{
  pinchScale.setValue(1)
  lastScale.current = 1;
  baseScale.setValue(lastScale.current);
}

};

const onPanGestureEvent = Animated.event(
[
{
nativeEvent: {
translationX: pan.x,
translationY: pan.y,
},
},
],
{ useNativeDriver: true }
);

const onPanHandlerStateChange = ({ nativeEvent }) => {
if (enablePan && nativeEvent.oldState === State.ACTIVE) {
pan.setOffset({
x: pan.x._value,
y: pan.y._value,
});
pan.setValue({ x: 0, y: 0 });
}
};

const containerStyle = {
flex: 1,
...Platform.select({
ios: {
// shadowColor: 'black',
// shadowOpacity: 0.5,
// shadowRadius: 5,
},
android: {
elevation: enablePan ? 1 : 0,
},
}),
};

return (
<PinchGestureHandler

  shouldCancelWhenOutside={false}
>
  <Animated.View style={containerStyle}>
    <PanGestureHandler
      onGestureEvent={onPanGestureEvent}
      onHandlerStateChange={onPanHandlerStateChange}
      shouldCancelWhenOutside={false}
      enabled={enablePan} // Enable/disable based on the condition
    >
      <Animated.View style={{
        flex: 1,
        transform: [
          { scale: Animated.multiply(baseScale, pinchScale) },
          { translateX: pan.x },
          { translateY: pan.y },
        ],
      }}>
        {children}
      </Animated.View>
    </PanGestureHandler>
  </Animated.View>
</PinchGestureHandler>

);
};

export default PinchZoom;