MUI tabs working but not animating changes - reactjs

Question

I have a React app that displays a list of cards displaying assignment info for an educational app. Each card contains MUI tabs so that teachers can navigate through students' work. Simplified code below:
teacherClass.jsx
function TeacherClass(props) {
const [classData, setClassData] = React.useState(props.classData);
const [assignments, setAssignments] = React.useState([]);
//assignments are found from Firebase elsewhere in this file. Omitted for simplicity.
const [tabValue, setTabValue] = React.useState(0);
const handleTabChange = (event, newValue) => {
setTabValue(newValue);
}
const AssignmentCard = (assignment) => (
<Card>
<Tabs value={tabValue} onChange={handleTabChange} >
{classData.students ? classData.students.map((stu) =>
<Tab label={stu.name} value={stu} />) : null }
</Tabs>
</Card>
)
return (
<div>
{ assignments ? assignments.map((assignment) => AssignmentCard(assignment)) : null }
</div>
);
}
export default TeacherClass;
This works just fine, however the problem is that when I change tabs, it changes the tab for EVERY card, not just the one that I selected. I thought I could fix this by having my tabValue useState as an array or something, but instead decided to create a new component so that each card could have its own useState:
teacherAssignmentCard.jsx
function TeacherAssignmentCard(props) {
const classData = props.classData;
const assignment = props.assignmentData;
const [tabValue, setTabValue] = React.useState(classData.students[0]);
const AssignmentCard = () => {Same code as 'AssignmentCard' in 'teacherClass.jsx',
but with no argument as 'assignment' comes from props}
return (
<AssignmentCard />
);
and in teacherClass.jsx I of course changed the return:
return (
<div>
{ assignments ? assignments.map((assignment) =>
<TeacherAssignmentCard classData={classData} assignmentData={assignment} />) : null}
</div>
);
I thought this was a fairly elegant solution and it worked perfectly. Each tab click only changes the tab for one assignment. However, what was very strange was that I lost the nice smooth MUI animation where the line underneath the tab slides over to the new tab. Instead it just repositions instantly.
I have checked and rewritten my code a half dozen times and made sure it's exactly the same. Any ideas what could be causing this weird behaviour or how to fix it?? Thank you.