材质UI-在onChange事件之后，数组将重置为0元素.(TextField组件)

我目前正在构建一个应用程序，希望人们从他们想要创建群组聊天室的用户列表中进行选择。之后，我有一个TextField，允许他们为自己的组设置一个名称。

问题：文本字段的onChange事件似乎在键入时将数组重置为0元素。请参阅下面的GIF。

有人遇到过这样的事情吗？我将把我的相关代码片段粘贴到下面。

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>

更新：我验证了实际上是我的TextField中的onChange类型事件将我当前的用户ID数组重置为0。请在此处查看GIF：https://gyazo.com/f306b6907ca755ad07fa13b542b87d27

如果有人想知道我的事件是如何将用户ID推入数组的，下面是这个事件：

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