Ошибка типа: undefined не является объектом (оценивается как _this.state.controls ')

Question

import React, {component} from 'react';
import {StyleSheet, View, Text, Button, TextInput, TouchableOpacity,} from 'react-native';
import validate from './Utility/validations';

const App: () => React$Node = () => {
    state : {
       controls: {
       email: {
           value: " ";
           valid: false;
           validationRule: {
                isEmail: true
                 }
                };

       password: {
              value: "";
              valid: false;
              validationRule: {
                 minLength: 6
                      }
                   };

       confirmPassword: {
              value: "";
              valid: false;
              validationRule: {
                  equalTo: 'password'
                  }
               };
       }
    };

   updateInputState = (key, value) => {
   let connectedValue = {};

     if(this.state.controls[key].validationRule.equalTo){
         const equalControl = this.state.controls[key].validationRule.equalTo.bind(this);
         const equalValue = this.state.controls[equalControl].value.bind(this);
              connectedValue= {
                    ...connecstedValue,
                    equalTo: equalValue
    };
   }
     if (key === 'password'){
             connectedValue= {
            ...connectedValue,
               equalTo: value
           };

                    const equalControl = this.state.controls[key].validationRule.equalTo;
                    const equalValue = this.state.controls[equalControl].value;
                    connectedValue ={
                              ...connectedValue,
                               equalTo: equalValue
                            };
     }

     this.state = this.setState.bind(this);
     this.setState(prevState => {
     return{
        controls: {
                      ...prevState.controls,
                        confirmPassword: {
                                 ...prevState.controls.confirmPassword,
                                 valid : key === 'password' ? 

validate(prevState.controls.confirmPassword.value, prevState.controls.confirmPassword.validationRule, 
connectedValue) : prevState.controls.confirmPassword.valid

                                },
                       [key]:{
                                ...prevState.controls[key],
                                value: value,
                                valid: validate(val, 
prevState.controls[key].validationRule).connectedValue

                              }

                      }

      };

      });

      };


  return (
  <View style={styles.contain}>
        <View >
           <Text style={styles.headText}>React Form</Text>
           <TextInput
              style= {styles.editText}
              placeholder="Email"
              value = {this.state.controls.email.value}
              onChangeText={(val)=>this.updateInputState('email', val)}
              />

           <TextInput
              style= {styles.editText}
              placeholder="Password"
              value = {this.state.controls.password.value}
              onChangeText={(val)=>this.updateInputState('password', val)}
              />

           <TextInput
              style= {styles.editText}
              placeholder="Confirm Password"
              value = {this.state.controls.confirmPassword.value}
              onChangeText={(val)=>this.updateInputState('confirmPassword', val)}
              />

        </View>

        <View>
           <TouchableOpacity
              style={styles.btn}>
               <Text style={styles.btnText}>SUBMIT</Text>
           </TouchableOpacity>
        </View>

        </View>
    );
    };

    const styles = StyleSheet.create({
      contain:  { padding: 20 },
      editText: {
           padding: 10,
           borderRadius: 4,
           borderWidth: 1,
           borderColor: '#0059F2',
           fontSize: 18,
           marginVertical: 10
             },

      headText: {
           textAlign: 'center',
           fontSize: 40,
           marginVertical: 20,
           fontWeight: 'bold',
           color: '#0059F2'
      },

      btn: {
           marginTop: 20,
           height: 50,
           borderRadius: 4,
           borderWidth: 1,
           borderColor: 'transparent',
           backgroundColor: '#2196F3'
      },

      btnText: {
           paddingVertical: 12,
           color: 'white',
           fontSize: 18,
           fontWeight: 'bold',
           textAlign: 'center'
      }


    });

export default App;