Reusing Component State issue – State always retained for last reference loaded

I tried creating a reusable component in React. Which has a textInput and secure text entry handled in the state of the reusable component. But the state is not getting maintained differently when reusing always the last state is updated,

Issue: If i call the reusable const two times on a single screen or on the next screen in stack. The toggle for secure entry keeps changing for the last field loaded and earlier loaded fields state is lost.
i.e., when i click on toggle of Password, text change from hidden to visible or vice-versa happens for Confirm password field.

This is how i call

<View style={styles.inputContainerView}>
                    <InputTextFieldView
                        enteredText={passwordEntered}
                        setEnteredText={setPasswordEntered}
                        title={Constants.registerPasswordPlaceholder} icon={lockIcon}
                        isSecureEntry={true}
                        placeholder={Constants.registerPasswordPlaceholder} />
                </View>
                <View style={styles.inputContainerView}>
                    <InputTextFieldView
                        enteredText={confirmPasswordEntered}
                        setEnteredText={setConfirmPasswordEntered}
                        title={Constants.registerConfirmPasswordPlaceholder} icon={lockIcon}
                        isSecureEntry={true}
                        placeholder={Constants.registerConfirmPasswordPlaceholder} />
                </View>

My component:

const InputTextFieldView = ({ enteredText, setEnteredText, title, icon, isSecureEntry, placeholder }) => {

const [isSecureEntryEnabled, setIsSecureEntryEnabled] = useState(isSecureEntry)
const eyeOpenIcon = require('../../../assets/visibility.png')
const eyeCloseIcon = require('../../../assets/close-eye.png')

useEffect(() => {
    console.log('called')
}, [])

toggleSecureTextEntry = () => {
    console.log('title', title)
    setIsSecureEntryEnabled(!isSecureEntryEnabled)
}

return (
    <View style={styles.fieldsContainerView}>
        <Text style={styles.titleStyle}>{title}</Text>
        <View style={[styles.fieldInputContainerView, {padding: Platform.OS === 'ios' ? 12 : 0}]}>
            <Image source={icon} style={styles.fieldIconView} />
            <TextInput secureTextEntry={isSecureEntryEnabled} style={{ width: isSecureEntry ? '75%' : '85%' }} onChange={() => setEnteredText()} value={enteredText} placeholder={placeholder} />
            {isSecureEntry &&
                <TouchableWithoutFeedback onPress={() => toggleSecureTextEntry()}>
                    <Image source={isSecureEntryEnabled ? eyeOpenIcon : eyeCloseIcon} style={styles.fieldIconView} />
                </TouchableWithoutFeedback>
            }
        </View>
    </View>
)

}