react native app crushes after using setState

I'm trying to build a custom password component which menage is own state, now the problem is that when I click on TextInput.icon the app stop responding. P.s the this component is running inside of a functional componet. this is my code:

// This Components is the used to replace the navigation bar from ract native navigation using the header optionsimport React, { Component } from 'react';import {  View } from 'react-native';import {  TextInput } from 'react-native-paper';interface DeliverText{  onChangeText:(text:string)=>void;  value:string;}interface SecureState {    secure:boolean;} export class Password extends Component<DeliverText,SecureState>{     constructor(props:DeliverText){         super(props);         this.state={secure:true}     }     render(){       const {secure} = this.state;        console.log(`reloading secure:${secure}`);        return (<View><TextInput                     label="Password"                     value={this.props.value}                    onChangeText={this.props.onChangeText}                    secureTextEntry={secure}                    right ={<TextInput.Icon name={secure?"eye":"eye-close"} onPress={()=>{this.setState({secure:!secure})}} />                    }           /></View>        );     } }