Hey everyone. I'm playing around with gluestack and Im seeing some really weird behavior. I have the following code snippet for a login page:

                <Text style={styles.signUpFieldDescription}>Password </Text>
                
                <Input style={styles.signUpInput}>
                  <InputSlot className="pl-3">
                    <InputIcon as={Lock} style={styles.signUpIcon} />
                  </InputSlot>
                  <InputField placeholder="Enter Password" type="password" value={password} onChangeText={setPassword} />
                  <InputSlot className="pr-3" onPress={() => setShowPassword(!showPassword)}>
                    <InputIcon as={showPassword ? EyeOff : Eye} style={styles.signUpIcon} />
                  </InputSlot>
                </Input>

                <Input style={styles.signUpInput}>
                  <InputSlot className="pl-3">
                    <InputIcon as={Lock} style={styles.signUpIcon} />
                  </InputSlot>
                  <InputField placeholder="Enter Password" type="password" value={password} onChangeText={setPassword} />
                  <InputSlot className="pr-3" onPress={() => setShowPassword(!showPassword)}>
                    <InputIcon as={showPassword ? EyeOff : Eye} style={styles.signUpIcon} />
                  </InputSlot>
                </Input>

These two identical pieces of code for the input result in different behaviors; the top input doesnt show the correct type whereas the bottom one does. I have absolutely no clue what is going on. Removing one goes back to the incorrect behavior of it not recognizing the type