[bug] Dynamic group sorting

[Starlette]

Describe the bug
I have a dynamic array that controls the groups and the items I'm sorting between each group.

interface ReviewerGroup {
	id: string;
	reviewers: IReviewer[];
}
// my TSX component 
const [groups, setGroups] = useState<ReviewerGroup[]>([]);
	const [reviewers, setReviewers] = useState<IUser[]>([new User()]);
	const group = 'reviewers';
	const animation = 150;
  
  useEffect(() => {
    async function fetchData() {
			setGroups([
				{
					id: 'group1',
					reviewers: [
						{
							id: 1,
							first_name: 'fname 1',
							last_name: 'lname 1'
						}, {
							id: 2,
							first_name: 'fname 2',
							last_name: 'lname 2'
						}
					]
				},
				{
					id: 'group2',
					reviewers: [{
						id: 3,
						first_name: 'fname 3',
						last_name: 'lname 3'
					}, {
						id: 4,
						first_name: 'fname 4',
						last_name: 'lname 4'
					}]
				}
			]);
		}
		fetchData();
  }, []);

	const setGroup = (e: IReviewer[], groupIndex: number) => {
		groups[groupIndex].reviewers = e;
		setGroups(groups);
	}

	return (
		<AdminLayout>
			<ReviewerOptionsMenu 
				title={(language.isEnglish) ? 'Reviewers' : 'Beoordelaars'} 
			/>
			<Grid container spacing={2} className="mt-1">
				<Grid item xs={12} md={9}>
					<Grid container spacing={2}>
						{groups.map((items, groupIndex: number) => {
							return (
								<Grid key={items.id} item xs={12} md={4}>
									<ReactSortable 
										group={group} 
										key={items.id}
										tag={SortableWrapper} 
										list={items.reviewers}  
										setList={(e) => setGroup(e, groupIndex)}
										animation={animation}
									>
										{items.reviewers.map((user, itemIndex: number) => {
											return (
												<Chip  
													clickable={true}
													key={user.id}
													avatar={
														<Avatar {...stringAvatar(`${user.first_name} ${user.last_name}`)} />
													} 
													label={`${user.first_name} ${user.last_name}`} 
												/>
											)
										})}
									</ReactSortable>
								</Grid>
							)
						}
							
						)}
					</Grid>
				</Grid>
				
				<Grid 
					item xs={12} md={3}
					className="unassigned-list"
				>
					<Paper variant="outlined" sx={{padding: 2}}>
						<Typography variant="h5" marginBottom={2}>
							Unassigned
						</Typography>
						<ReactSortable 
							group={group} 
							tag={SortableWrapper} 
							animation={animation}
							list={reviewers} 
							setList={setReviewers} 
						>
							{reviewers.map(user => {
								return (
									<Chip 
										key={user.id}
										clickable={true} 
										avatar={
											<Avatar {...stringAvatar(`${user.first_name} ${user.last_name}`)} />
										} 
										label={`${user.first_name} ${user.last_name}`}
										color="primary"
									/>
								)
							})}
						</ReactSortable>
					</Paper>
				</Grid>
			</Grid>
		</AdminLayout>
	);

Expected behavior
For the "" component to sort between groups.

Information
When I console.log(groups) inside my setGroup() function, at the bottom, I get the correct data but it isn't updating in the template.

Versions - Look in your package.json for this information:
react-sortable = ^6.1.4
react = ^18.2.0

[Starlette]

I got it working by changing one line: setGroups([...groups]);