When closed it is instant. Is there a way to fix this?

[GitPut]

`// /* eslint-disable react-hooks/exhaustive-deps */
import React, {useRef, useState} from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
SafeAreaView,
Animated,
TouchableOpacity,
Modal,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export default function ImageView({inputImage, style}) {
const imageCenter = useRef(new Animated.ValueXY()).current;
const currentImageY = useRef(0);
const currentImageX = useRef(0);
const [on, setOn] = useState('none');
const [visible, setVisible] = useState(false);

const image = [
{
url: '',
props: {
// Or you can set source directory.
source: inputImage,
},
},
];

const toCenter = () => {
setVisible(true);
setOn('auto');
const posY = windowHeight / 2 - currentImageY.current - 100;
const posX = windowWidth / 2 - currentImageX.current - 100;
// Animated.timing(imageCenter, {
// toValue: {x: posX, y: posY},
// duration: 500,
// useNativeDriver: false,
// }).start();
};
const toOrigin = () => {
setOn('none');
// Animated.timing(imageCenter, {
// toValue: {x: 0, y: 0},
// duration: 500,
// useNativeDriver: false,
// }).start();
};

return (



<Animated.Image
source={inputImage}
//source={require('./compressed.jpg')}
style={[
{
borderRadius: 22,
height: 200,
width: 200,
},
style,
{
transform: [
{translateY: imageCenter.y},
{translateX: imageCenter.x},
],
},
]}
/>



<ImageViewer
enableSwipeDown={true}
onSwipeDown={() => {
setVisible(false);
toOrigin();
}}
imageUrls={image}
/>


);
}
`

When I open it the image it flashes and opens a bit slower which is good. But when I use the slide down to close it instantly closes and does not look good. So could someone please help me so I can make it close slower