React native draggable and swipeable list

dragable_swipeable.js

import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist'
import SwipeableItem from 'react-native-swipeable-item'
.
.
.
const itemRefs = React.useRef(new Map())

<DraggableFlatList
	activationDistance={15}
	data={getCategoriesFromTaskList()}
	renderItem={({ item, index, drag, isActive }) => {
		<ScaleDecorator>
			<SwipeableItem
				key={props.cat.catId}
				item={props.cat}
				ref={(ref) => {
					if (ref && !props.itemRefs.current.get(props.cat.catId)) {
						props.itemRefs.current.set(props.cat.catId, ref);
					}
				}}
				overSwipe={50}
				renderUnderlayLeft={renderUnderlayLeft}
				snapPointsLeft={[50]}
				renderUnderlayRight={renderUnderlayRight}
				snapPointsRight={[50]}
				onChange={({ open }) => {
					if (open) {
						for (const [catId, ref] of props.itemRefs.current.entries()) {
							if (catId !== props.cat.catId && ref) ref.close();
						}
					}
				}}
			>
				<TouchableOpacity activeOpacity={0.6} onLongPress={props.drag} onPress={() => navigation.navigate('Task', { 'cat': props.cat })}>
					<View style={[styles.list, (props.isActive ? { borderColor: '#000' } : { borderColor: '#808080' }), { backgroundColor: props.cat.color, justifyContent: 'center' }]}>
						<Text style={styles.catfont}>{props.cat.catName + ' (' + props.cat.remainingCount + '/' + props.cat.totalCount + ')'}</Text>
					</View>
				</TouchableOpacity>
			</SwipeableItem>
		</ScaleDecorator>
	}}
	keyExtractor={item => item.catId.toString()}
	onDragEnd={({ data }) => updateSequence(data)}
	ListEmptyComponent={<Text style={[styles.center, styles.emptytext]}>EMPTY</Text>}
/>

Thanks a lot! The official docs lack clarity