React native how to render items without using any loder?

[KamranZafar19]

I have implemented a delete feature for the image editor app.
Case: If the user added a number of images in edit mode and wants to delete the unnecessary layer of the image from the editor then allows to delete the selected layer from the array.
Issue: when deleted the selected layer from the array the remaining image swaps its position and size to deleted image position and size. Even if I double-check the scale value and position remain the same as I fixed. This issue occurs if am not using the loder and if am using the loder then the image did not swap their position and scale.
how to handle the states: I am handling the states in the component and I also checked if I handled the states in redux same error occurred. App speed to slow if handled with redux. Here is my code.
`const onDeleteLayerSequence = data => {
let indexing = data.length;
data.forEach(item => {
indexing--;
item.key = indexing;
});
setInputData(data);
setIsDelete(!isDelete);
};

           const deleteLayer = index => {
             const filterItem = [
               ...inputData.slice(0, index),
               ...inputData.slice(index + 1, inputData.length),
               ];
              onDeleteLayerSequence(filterItem);
             };

              useEffect(() => {
               setImageArray(inputData.filter(item => item.type == 'image'));
               // setLoader(true);
              }, [isDelete]);    
           return (
              <>
               <AutoDragSortableView
                dataSource={inputData}
                parentWidth={util.WP(100)}
                childrenWidth={util.WP(100)}
                childrenHeight={util.WP(12)}
                keyExtractor={(item, index) => item.id}
                renderItem={(item, index) => render_item(item, index)}
                onDataChange={data => onSelectLayer(data)}
                onClickItem={(data, i) => replaceImage(data, i)}
              />
            </View>
          </DraggablePanel>
          <View style={styles.editImageWrapper}>
            <ViewShot
              ref={reference}
              options={{format: 'jpg', quality: 1.0, result: 'base64'}}>
              <ImageBackground
                style={[
                  styles.templateContainer,
                  {backgroundColor: background},
                ]}
                resizeMode="stretch"
                source={selectTemplate}>

                {isFocused &&
                  imageArray &&
                  imageArray.map((item, i) => {
                    return (
                      <component.PinchZoomView
                        minScale={0.1}
                        maxScale={5}
                        scale={item.scale}
                        translateX={item.translateX}
                        translateY={item.translateY}
                        data={value =>
                          modifyValues(value, item.layer, item.key)
                        }
                        key={i}
                        style={[
                          styles.pinchImagePosition,
                          {
                            zIndex: item.key,
                          },
                        ]}>
                        <ImageCarousel>
                          <Image
                            source={{
                              uri: item.editImage,
                              height: util.WP(100),
                              width: util.WP(100),
                            }}
                            key={item}
                            resizeMode="contain"
                          />
                        </ImageCarousel>
                      </component.PinchZoomView>
                    );
                  })}
              </ImageBackground>
            </ViewShot>
          </View>
         </>
        )`