React Native !!! Error: Invalid hook call. Hooks can only be called inside of the body of a function component

The error : Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   de of the body of a function component. This could happen for one of the following reasons:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. ERROR TypeError: null is not an object (evaluating 'dispatcher.useState') ERROR Invariant Violation: "main" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

• A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

My code

**import * as React from 'react';
import {useState} from 'react';
import { Text, StyleSheet, 
KeyboardAvoidingView, ScrollView, Image,
TextInput, TouchableOpacity, View } from 'react-native';
import { CheckBox } from 'react-native-elements';
import {Ionicons} from '@expo/vector-icons'

const [input, setInput] = useState('');
const [hidePass, setHidePass] = useState(true);
export default class App extends React.Component {
 

    constructor(props) {
      super(props);
      this.state = {
          ischecked1: true
      };
  }
    onChangeCheck1() {
      this.setState({ ischecked1: !this.state.ischecked1 });
    }
    render() {
      
        return (
          
            <KeyboardAvoidingView
            style={styles.container}
             >
            <ScrollView>
              
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                    />
                <Text style={styles.helloText}> 
                Olá de novo !
                </Text>
               <Text style={styles.welcomeText}>
                  Bem-vindo(a) de volta,
                  sentimos sua falta! 
                </Text>
               
                <TextInput
                style={styles.inputArea}
                placeholder="Digite o e-mail"
                />
                <TextInput
                style={styles.inputArea}
                placeholder="Senha"
                value={input}
                onChangeText={ (texto) => setInput(texto)}
                secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={ () =>
                   setHidePass(!hidePass) }>
                  <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                   color="#A0D800" size={25}/>
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                <CheckBox
                  left
                  size={18}
                  checkedColor='#A0D800'
                  value={this.state.ischecked1}
                  checked={this.state.ischecked1}
                  onPress={this.onChangeCheck1.bind(this)}
                  containerStyle={{ backgroundColor: "transparent",
                  borderColor: "transparent", marginRight: 0}}
                />
              <Text style={styles.Connected}> 
                Manter-se conectado
              </Text>
                <Text style={styles.forgotPassword}> 
                  Esqueci minha senha
                </Text>
                
                </View>
                
          
                <TouchableOpacity 
                    style={styles.botao}
                    /*onPress={ () => {this.clicou()} }*/
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>
                
                
            </ScrollView>
            </KeyboardAvoidingView>
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {      
        marginTop:50,
        marginBottom: 80,
        width: 150,
        height: 40,
        
    },
    inputArea:{
       marginTop: 30,
       padding: 15,
       height: 60,
       width: 370,
       borderColor: '#808080',
       borderWidth: 1,
       backgroundColor: '#fff',
       fontSize: 16,
       fontWeight: 'bold',
       borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 50,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    botaoText: {
      fontSize: 15,
      fontWeight: 'bold',
      color: '#fff'
    },
    helloText: {
      fontSize: 40,
      fontWeight: 'bold',
      marginTop: 15,
      color: '#000000',
      marginEnd: 120,
      marginTop: 8
    },
    welcomeText: {
      fontSize: 16,
      marginTop: 10,
      marginEnd: 35,
      marginVertical: 10,
      color: '#808080',
    },
    forgotPassword: {
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      marginBottom: 15,
      marginLeft: 30,
      fontSize: 12
    },
    Connected:{
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      fontSize: 12,
      marginRight: 55,
      marginLeft: -5
    },
    checkBoxStyle:{
      marginTop: 15,
      flexDirection: 'row',
      marginStart: -10
   },
   eye:{
   alignSelf: 'flex-end',
   bottom: 42,
   right: 40
   }
})**