Функция генерирует данные в соответствии со значением состояния, не меняющимся после первого рендеринга

Question

Я создаю экран входа в систему и регистрации и хочу, чтобы пользователь имел возможность выбрать регистрацию по электронной почте или по номеру телефона.

Я использую радиокнопку для этого, и по какой-то причине функция не меняет свой рендеринг, когда я меняю состояние (состояние наверняка изменяется, я проверил это с console.log).

Код:

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")}
    ...
   )
}

Думаю, это как-то связано с жизненными циклами? Я имею в виду, что я обновляю состояние, и я связал this с function RadioButton.

Примечание: При первой загрузке он показывает «Использовать адрес электронной почты», как проверено правильно. Это просто не меняется, когда я проверяю «Использовать номер телефона».

Любая помощь будет очень ценится.