React Native: Rendered more hooks than during previous render by useRef in react-native-reanimated

Question

In my RN 0.62.2 app, there is an error after the declaration of animated value is changed to use useRef. The code without error was:

import Animated from 'react-native-reanimated';
import {Value} from Animated;

const dragX = new Value(0);

Since it is functional component and I am following the documentation of react-native-reanimated to added useRef:

const dragX = useRef(() => new Value(0)).current;

After change, then the line above throws error:

Tried the following and the problem is the same:

const dragX = useRef(new Value(0));

Tried useValue and the error is the same. There aren't much information about how to use useRef in react-native-reanimated other than the doc linked above.

UPDATE:

The code is too long and messy. The method displayImg is to display a single image in area which is defined by its parent component. If there is more than one image (dateLen > 1) in parent component, then each and every image displayed by displayImg will be able to drag and requires animation. useRef is being used to maintain the status after each re-rendering.

function displayImg (img_source, width, ht, index, modalWidth, modalHt, dataLen, sortFn) {
        const aniIndex= new Value(index);
        const aniGridPR = new Value(gridPerRow);
        const dragX = useRef(new Value(0)).current;  //<<==this line causes error
        const dragY = new Value(0);
        const offsetX = new Value(0);
        const offsetY = new Value(0);
        const state = new Value(-1);
        const scale = new Value(1);
    var gridPerRow;
    console.log("image width : ", width);
    console.log("image ht : ", ht);
    if (dataLen <= 4 && dataLen > 1) {
        gridPerRow = 2;
    } else if (dataLen > 4) {
        gridPerRow = 3;
    } else {
        gridPerRow = 1;
    };
    
            
    function onUp ([x, y, indx, gridPR]) {
        console.log("In on Up");
    };
            
    
    if (img_source && img_source!==[] && img_source!=={}) {
        if (dataLen == 1) {
            const scale = new Value(1);
            function onGestureStateChange() {

            };
            /* const onGestureStateChange = event([
                //{nativeEvent:set(nativeEvent.scale, scale)},
            ]); */
            let scaleStyle = {
                transform:[
                    { perspective: 500 },
                    {
                        scale :  scale
                    }
                ]
            };
            return (
                <><PinchGestureHandler onHandlerStateChange={onGestureStateChange}>
                    <Animated.View style={scaleStyle}>
                    <GridImage
                        img_source={img_source}
                        width={width}
                        ht={ht}
                        index={index}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                    />
                    
                    {/* <DeleteButton index={index} /> */}
                    <ModalImage
                        img_source={img_source}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                        index={index}
                    />
                    </Animated.View>
                    </PinchGestureHandler>
                </>
                );
        } else {
            console.log("ani code");
            
            const addX = add(offsetX, dragX);
            const addY = add(offsetY, dragY);
            const transX = cond(eq(state, State.ACTIVE), addX);  //set(offsetX, addX)
            const transY = cond(eq(state, State.ACTIVE), addY, 
                                    cond(eq(state, State.END), 
                                        cond(or(greaterOrEq(abs(divide(dragX,new Value(width))), new Value(0.3)), greaterOrEq(abs(divide(dragY,new Value(ht))), new Value(0.3))), 
                                            call([addX, addY, aniIndex, aniGridPR], onUp))
                                        )
                                    );
                                    //, [ set(dragY, new Value(0)), set(dragX, new Value(0))]
            const handleGesture = event([
                {
                  nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    state,
                  },
                }, 
              ]);
            
            let aniStyle = {
                transform:[
                    { translateX : transX },
                    { translateY : transY },
                    
                ]
            };
            
            return (
                <>
                  
                    <PanGestureHandler 
                        onGestureEvent={handleGesture} 
                        onHandlerStateChange={handleGesture}
                        minPointers={1}
                        maxPointers={1}>
                        <Animated.View style={[aniStyle ]}>
                        <GridImage
                            img_source={img_source}
                            width={width}
                            ht={ht}
                            index={index}
                        />
                        </Animated.View>
                    </PanGestureHandler>
            
                {/* <DeleteButton index={index} /> */}
                <ModalImage
                    img_source={img_source}
                    modalWidth={modalWidth}
                    modalHt={modalHt}
                    index={index}
            />
                
                </>
                );
        };
        
    } else {
        return null;
    };
    
};