MuiDataTable search bar doesn't update a column that uses custom components

Question

Hi I'm new to nextJs and react so idk what I'm doing :).

I have a MUiDataTable that has column made of dropdown but when I use the search bar the dropdown value doesnt change and stay stuck to the row value. I made a video so its more clear https://youtu.be/soZQu3mdA5U

Codesandbox

"use client";

import Dropdown from './dropdown';
import { Paper } from '@mui/material';
import MUIDataTable from 'mui-datatables';

export default function Table({ }) {
    let sizes = [
        { id_size: 0, size: 'none' },
        { id_size: 1, size: 'XS' },
        { id_size: 2, size: 'S' },
        { id_size: 3, size: 'M' },
        { id_size: 4, size: 'L' },
        { id_size: 5, size: 'XL' },
        { id_size: 6, size: 'XXL' },
        { id_size: 7, size: 'XXXL' }
    ]
    let students = [
        {
            studentId: 1,
            firstName: 'aaaaaa',
            lastName: 'aaaaa',
            email: '[email protected]',
            sizeId: 4,
            campuses: { campusName: 'aaaaaaaaa' }
        },
        {
            studentId: 2,
            firstName: 'bbbbbb',
            lastName: 'bbbbbb',
            email: '[email protected]',
            sizeId: 0,
            campuses: { campusName: 'bbbbbbbb' }
        }
    ]

    const columns = ["First Name", "Last Name", "Email", "Size", "Campus"];
    let data = students.map((row) => (
        [
            row.lastName,
            row.firstName,
            row.email,
            <Dropdown id={row.studentId} studentId={row.studentId} initialValue={row.sizeId} sizes={sizes} />,
            row.campuses.campusName
        ]
    ))

    const options = {
        customToolbarSelect: () => { },
        print: 'false',
        rowsPerPage: 100,
        rowsPerPageOptions: [100, 200],
        tableBodyMaxHeight: '75vh',
        tableId: '1',
    };
    return (
        <>
            <br />
            <Paper>
                <MUIDataTable
                    title={"List of Students"}
                    columns={columns}
                    data={data}
                    options={options}
                />
            </Paper>
        </>
    )
}

Dropdown.js

"use client";

import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import FormControl from '@mui/material/FormControl';
import { useState } from 'react';

export default function Dropdown({ id, initialValue, studentId, sizes }) {
    const [currentValue, setCurrentValue] = useState(initialValue);
    console.log(studentId + " " + initialValue + " " + currentValue);

    const handleChange = (event) => {
        // setCurrentValue(event.target.value);
      
    };

    return (
        <>
            <FormControl>
                <Select
                    labelId={id}
                    id={id}
                    value={currentValue}
                    label={id}
                    sx={{ m: 1, minWidth: 120 }}
                    size="small"
                    onChange={handleChange}
                >
                    {sizes.map((size) => (
                        <MenuItem key={size.id_size} value={size.id_size}>{size.size}</MenuItem>
                    ))}
                </Select>
            </FormControl>
        </>
    );
}

Thank you for the help in advance, and I apologize for my English.

The content of the component dropdown should change based on the student's sizeId.

Answer 1

I just need to add a unique key to the dropdown component.

<Dropdown
  key={row.studentId} //this fix the problem
  id={row.studentId}
  studentId={row.studentId}
  initialValue={row.sizeId}
  sizes={sizes}
/>,