Мне нужно исправить ошибку с реактивным родным. в чем проблема?

Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это могло произойти по одной из следующих причин:

1. У вас могут быть несовместимые версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила крючков
3. У вас может быть несколько копий React в одном приложении.

   

     import React, { PureComponent, useState } from 'react'
        import { StoryContainer } from 'react-native-stories-view'
        import {
            TouchableOpacity,
            Alert,
            StyleSheet,
            View,
            Text,
            SafeAreaView,
            ImageBackground,
            Image,
            Platform,
            StatusBar,
        } from 'react-native'
        
        import { connect } from 'react-redux'
        
        class StoryViewScreen extends PureComponent {
            constructor(props) {
                super(props);
                this.state = {
        
                }
            }
        
            render() {
                const { files } = this.props.route.params;
                const fileUrls = [];
                for (var i = 0; i < files.length; i++) {
                    fileUrls.push(files[i].uri);
                }
                console.log("files path:", fileUrls);
                return (
                    <View style={{ flex: 1, flexDirection: 'column' }}>
                        {Platform.OS === 'ios' && (
                            <View style={{
                                backgroundColor: 'gray',
                                height: 45,
                            }}>
                                <StatusBar barStyle="light-content" backgroundColor={'green'} />
                            </View>
                        )}
                        {Platform.OS === 'android' && (
                            <StatusBar barStyle="dark-content" backgroundColor={'white'} />
                        )}
        
                        <SafeAreaView style={{ flex: 1, flexDirection: 'column', backgroundColor: 'gray' }}>
                            <StoryContainer
                                visible={true}
                                enableProgress={false}
                                images={fileUrls}
                                duration={5}
                                containerStyle={{
                                    width: '100%',
                                    height: '100%',
                                }} />
                            {/* <Text>This is teh realdksfjdsklfj</Text> */}
                        </SafeAreaView>
                    </View>
                );
            }
        };
        
        const style = StyleSheet.create({
        
        });
        
        function mapStateToProps(state) {
            return {
                // currentUser: state.user.currentUser,
            };
        }
        
        function mapDispatchToProps(dispatch) {
            return {
                dispatch
            };
        }
        
        export default connect(mapStateToProps, mapDispatchToProps)(StoryViewScreen);