I have a TextInput and its placeholder in 12 hours (00:00) format with no AM or PM suffix, and I want when the user finishes typing the time, it automatically adds a ':' character after I enter the hours time. then I keep entering the number of minutes, and while the user enters the number of hours greater than 12, it automatically converts the hour to the 12-hour format, for example, if the user enters 13 it should automatically change back to 01 and then add the character ':' after.

Ex: 02 -> 02:xx,

15 -> 03:xx

Below is my code

const [times, setTime] = useState('');

const convertTime12Hours = (time12h) => {
    const time = time12h.split(' ');

    let [hours, minutes] = time.split(':');

    if (hours >= '12') {
        hours = hours % 12;
    }
    setTime(`${hours}:${minutes}`);
};

<TextInput
    value={times}
    style={styles.text_input}
    onChangeText={(value) => {
        convertTime12Hours(value);
    }}
    placeholder='00:00'
/>;

Please, Hope you guys can help me.