How to create variables for each row in a React table?

I am rendering a dynamic table in react like this:

    <TableBody>
      {finalLoadedTokensData.map((loadedToken, index) => {
        const isItemSelected = isSelected(loadedToken.contract);
        const labelId = `enhanced-table-checkbox-${index}`;

        return(
          <TableRow
            hover
            key={loadedToken.id}
            selected={isItemSelected}
            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
          >
            <TableCell padding="checkbox">
              <Checkbox
                color="primary"
                checked={isItemSelected}
                inputProps={{
                  'aria-labelledby': labelId,
                }}
                disabled={false}
                onClick={(event) => handleClick(event, loadedToken.contract, loadedToken.type, parseInt(loadedToken.tokenId) || "-", loadedToken.quantity)}
              />
            </TableCell>
            <TableCell align="center">{loadedToken.type}</TableCell>
            <TableCell align="center">{loadedToken.contract}</TableCell>
            <TableCell align="center">{loadedToken.tokenId}</TableCell>
            <TableCell align="center">{loadedToken.quantity}</TableCell>
            <TableCell align="center">{loadedToken.lockedQuantity}</TableCell>
            <TableCell>
              <DateTimePicker
                minDate={moment().toDate()}
                value={dateValue}
              />
            </TableCell>
            <TableCell align="center">
              <Button 
                disabled={!isItemSelected} 
                color="primary" 
                variant="contained" 
                onClick={async () => {                        
                  await lockToken(selected, props.smartNftId, 1679823611)
                }}
              >
                Lock
              </Button>
            </TableCell>
          </TableRow>
        )})}
    </TableBody>

If I create a variable like the one I have (dateValue) and I handle its state with a useState, I am only managing one variable for all the possible rows I have. What I need is to be able to create a value for the DateTimePicker component but for each one of the rows.

How can I do that?

You can try to store the dateValue values in an array:

const [dateValues, setDateValues] = useState([])

And then in the table:

    <TableBody>
      {finalLoadedTokensData.map((loadedToken, index) => {
        const isItemSelected = isSelected(loadedToken.contract);
        const labelId = `enhanced-table-checkbox-${index}`;

        return(
          <TableRow
            key={loadedToken.id}
            selected={isItemSelected}
          >
        
            <TableCell>
              <DateTimePicker
                minDate={moment().toDate()}
                value={dateValues?.[index] || null}
                setValue={value => {
                  let newValues = [...dateValues];
                  newValues[index] = value;
                  setDateValues(newValues);
                }}
              />
            </TableCell>
          </TableRow>
        )})}
    </TableBody>