Cannot pause videos

Question

I have a flat list where each item rendered is a <Video> from react-native-video. I need to pause all playing videos when the user scrolls. I use onScrollBeginDrag to set a paused state, which is passed in to each video component. Below is the relative parts of the component:

const [areAllVideosPaused, setAreAllVideosPaused] = useState(false);

const handleScrollBeginDrag = (event: NativeSyntheticEvent<NativeScrollEvent>): void => {
        setAreAllVideosPaused(true);
};

const renderVideo = (item) => {
    <Video
        source={{ uri: item.localFilePath }}
        controls
        paused={areAllVideosPaused}
    />
}

return (
    <FlatList
        // other props here
        onScrollBeginDrag={handleScrollBeginDrag}
        keyExtractor={(item) => item.id}
        renderItem={renderVideo}
    />
);

Changing the state does not change the play/pause state of the videos.