How can I set a state with react native and typescript?

I'm just started with react native and I'm trying to use typescript. I am trying to set my state but it gives me the following error.

Argument of type '{ pickerData: PickerData; }' is not assignable to parameter of type 'IRegisterScreenState | ((prevState: Readonly<IRegisterScreenState>, props: Readonly<IRegisterScreenProps>) => IRegisterScreenState | Pick<...>) | Pick<...>'.
  Type '{ pickerData: PickerData; }' is not assignable to type 'Pick<IRegisterScreenState, "pickerData">'.
    Types of property 'pickerData' are incompatible.
      Type 'PickerData' is missing the following properties from type 'ReactNativePhoneInput<typeof TextInput>': isValidNumber, getNumberType, getValue, getFlag, and 14 more.

I looked up on how to set a state using typescript an I found the following https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native#adding-a-component where they use the interface State and Props. Can I not make my own interface for this component? I've seen others do IState and IProps. Otherwise I woul not know what is causing my error. The error comes from the following line this.setState({pickerData: this.phoneInputRef.current.getPickerData()});

import * as React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {Button} from 'react-native-elements';

import PhoneInput from 'react-native-phone-input';
import ReactNativePhoneInput from 'react-native-phone-input';
import PickerData from 'react-native-phone-input';
// import CountryPicker from 'react-native-country-picker-modal';

export interface IRegisterScreenProps {

}

export interface IRegisterScreenState{
  cca2? : string;
  pickerData? : PickerData;
}

export default class RegisterScreen extends React.Component<IRegisterScreenProps, IRegisterScreenState> {

  private phoneInputRef = React.createRef<ReactNativePhoneInput>();

  constructor(props:IRegisterScreenProps) {
    super(props);
    this.onPressFlag = this.onPressFlag.bind(this);
    this.selectCountry = this.selectCountry.bind(this);
    this.submitPhoneNumber = this.submitPhoneNumber.bind(this);
    this.state = {
      cca2: 'US',
    };
  }

  componentDidMount() { 
    if (this.phoneInputRef.current) 
      this.setState({pickerData: this.phoneInputRef.current.getPickerData()}); 
  }

  onPressFlag() {
    // this.countryPicker.openModal();
    console.log(this.phoneInputRef.current);
  }

  selectCountry(country:IRegisterScreenState) {
    if(this.phoneInputRef.current)
      this.phoneInputRef.current.selectCountry(country.cca2.toLowerCase());
    // this.setState({ cca2: country.cca2 });
  }

  public render(): JSX.Element
  {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Tempp</Text>
        <PhoneInput ref={this.phoneInputRef} onPressFlag={this.onPressFlag}/>
        <Button title="Submit" onPress={this.submitPhoneNumber} containerStyle={styles.submitButton} />
      </View>
    );
  }

  private submitPhoneNumber() : void
  {
    console.log(this.phoneInputRef);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 50,
    margin: 30,
  },
  phoneNumberInput:{
    width: 300,
  },
  submitButton:{
    width: 150,
    margin: 25,
  },
});