Material UI - Array is resetting to 0 elements after onChange event. (TextField component)

Question

Im currently building a application where i want people to choose from a list of users who they want to create a group chatroom with. After that, i have a TextField that allows them to set a name to their group.

The problem: The onChange event for the textfield seems to reset the array to 0 elements when typing. See GIF below.

Have anyone encountered something like this? I will paste my relevant code snippet down below.

return (
        <div>
            <Dialog
                open={MultiplelistClick}
                keepMounted
                className='grpchatDialog'
                onClose={() => setMultiplelistClick(false)}
                aria-describedby="alert-dialog-slide-description"
                fullWidth
                maxWidth="xl"
            >
                <DialogTitle className='dialogTitle'>{"Choose users"}</DialogTitle>
                <DialogContent>
                    <DialogContentText className="dialog-information">
                        2 minimum users required here.
                    </DialogContentText>
                </DialogContent>
                {

                    userData && userData.filter((val: any) => {
                        return (searchTerm === '' && (val.id != myIdNumber) || (val.firstName.toLowerCase().includes(searchTerm.toLocaleLowerCase()) && (val.id != myIdNumber)));
                    }).map((user: UserModel) => {
                        return <li key={user.id}>
                            <img className='liAvatar' src={placeholderimg} alt='xx' />
                            <p className='nameDisplay'onClick={() => createChatRoom(user)}> {user.firstName} {user.lastName}</p>
                            <Checkbox value={user.id} onClick={() => CheckBoxEvent(user.id)} className='myCheckBox' />
                        </li>
                    })
                }
                <TextField
                    label='Give your group a name.'
                    variant='outlined'
                    rows={1}
                    className='grpNameInput'
                    onChange={(e) => setGroupName(e.target.value)}
                />
                <DialogActions>
                    <Button onClick={() => CreateGroupChatRoom(GroupChatList)}>Skapa Chattrum</Button>
                </DialogActions>
            </Dialog>
        </div>

UPDATE: I verified it is actually the onChange typing event in my TextField that resets my current array of user ids to 0. See GIF here: https://gyazo.com/f306b6907ca755ad07fa13b542b87d27

For anyone wondering how my event for pushing in the user ids into the array, heres the event for that:

const CheckBoxEvent = (userid: number) => {
    if (!GroupChatList.includes(userid)) {
        GroupChatList.push(userid); console.log(GroupChatList)
   }
    else {
            var index = GroupChatList.indexOf(userid);
            GroupChatList.splice(index, 1);
    }
}

Answer 1

React re-renders components frequently. By re-render, especially with Functional Components, we mean: "run the Function"...which re-creates the declared variables and functions within each and every time. So when the component re-renders, GroupChatList is a new variable reset to whatever the code within the component says.

To maintain a value in a variable across renders, use the useState hook to put the variable into "state".

Also, when you use the "set state function" to update the value in the state variable, that is the trigger to React that it needs to re-render the component (because "information in state has changed").