I have a problem. I use a Samsung S20 with Android 14, and my tester uses a Xiaomi with Android 11. I use TextInput from react-native-paper. When I test it on my phone, everything is normal, but when my tester runs it, it looks different. Here is my code:

<Formik
          initialValues={{ userName: userName , password: password }}
          validationSchema={LoginSchema}
          enableReinitialize={true}
          validateOnMount={true}
          onSubmit={async (values) => {
            setLoading(true);
            const response = await requestLogin(values);
            const { notify } = useNotifications();
            if (response) {
              await setToken(response.access_token);
              navigation.navigate(ROUTER.DASHBOARD, { screen: ROUTER.HOME });
              setLoading(false);
            } else {
              setLoading(false);
            }
          }}
        >
          {({
            handleChange,
            handleBlur,
            handleSubmit,
            errors,
            touched,
            values,
          }) => (
            <View>
              <Text
                variant="headlineMedium"
                style={{
                  color: '#000000',
                  alignSelf: 'center',
                  marginBottom: 10,
                  fontWeight: 600,
                }}
              >
                Đăng nhập
              </Text>
              <TextInput
                mode="outlined"
                outlineColor="#BDBDBD"
                activeOutlineColor="#3699FF"
                textColor="#000000"
                placeholderTextColor={'#BDBDBD'}
                label="Tên đăng nhập"
                onChangeText={handleChange('userName')}
                onBlur={handleBlur('userName')}
                value={values.userName}
                style={{ backgroundColor: '#F6F6F6' }}
              />
              {errors.userName && touched.userName ? (
                <Text style={{ color: 'red' }}>{errors.userName}</Text>
              ) : null}
              <TextInput
                mode="outlined"
                outlineColor="#BDBDBD"
                activeOutlineColor="#3699FF"
                textColor="#000000"
                placeholderTextColor={'#BDBDBD'}
                label="Mật khẩu"
                onChangeText={handleChange('password')}
                onBlur={handleBlur('password')}
                value={values.password}
                secureTextEntry={hide}
                right={
                  <TextInput.Icon
                    icon={hide ? 'eye-off-outline' : 'eye'}
                    onPress={() => setHide(!hide)}
                  />
                }
                style={{ backgroundColor: '#F6F6F6' }}
              />
              {errors.password && touched.password ? (
                <Text style={{ color: 'red' }}>{errors.password}</Text>
              ) : null}
              <Button
                mode="contained"
                buttonColor="#3699FF"
                textColor="#FFFFFF"
                onPress={handleSubmit}
              >
                Đăng Nhập
              </Button>
            </View>
          )}
        </Formik>

Here is what i see in my phone:

Here is what my tester see in his phone:

I don’t know why the cursor on my tester phone is so different. Is it because of my code or is it because of his phone? Is there any way to fix it?