Function generating data according to state value not changing after first render

I am creating a Login and Register screen and I want the use to have an option to choose to register with email or phone number.

I am using a radio button for this, and for some reason the function does not change its render when I change the state(the state is for sure changed, I checked it with console.log).

Code:

export default class App extends React.Component {    constructor(props) {        super(props);        this.state = {            //login            email: "",            password: "",            //register            firstName: "",            lastName: "",            date: new Date(),            checked: "Use Email Address",            ...        }    }    componentDidMount() {        ...        Register = Register.bind(this);        RadioButton = RadioButton.bind(this);    }    onRadioChange(label) {        if (label === "Use Email Address") {            this.setState({ checked: "Use Email Address"})            console.log('test2')        } else {            this.setState({ checked: "Use Phone Number" })            console.log('test')            console.log(this.state.checked)        }    }    render() {        return (<Stack.Navigator initialRouteName="Login"><Stack.Screen name="Login" component={Login} options={{ headerShown: false }} /><Stack.Screen name="Register" component={Register} options={{ headerShown: false }} /></Stack.Navigator>        )    }}function RadioButton(label) {    return (<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 5 }}><TouchableOpacity                onPress={() => { this.onRadioChange(label) }}                style={{                    height: 24,                    width: 24,                    borderRadius: 12,                    borderWidth: 2,                    borderColor: '#FF9C09',                    alignItems: 'center',                    justifyContent: 'center',                }}>                {                    this.state.checked === label ?<View style={{                            height: 10,                            width: 10,                            borderRadius: 5,                            backgroundColor: '#FF9C09',                        }} />                        : null                }</TouchableOpacity><Text style={{ marginLeft: 10, fontFamily: 'open-sans-regular' }}>{label}</Text></View>    );}function Register({navigation}) {    ...    return(     ...    {RadioButton("Use Email Address")}    {RadioButton("Use Phone Number")}    ...   )}

I guess this has something to do with the lifecycles? I mean I am updating the state and I binded this with function RadioButton.

Note: When it's first loaded it shows "Use Email Address" as checked correctly. It just does not change when I check "Use Phone Number".

Any help would be very much appreciated.