React.map no obtiene el valor seleccionado

Tengo una lista de elementos, que se muestra correctamente con mui list y he creado un botón para poder editar la lista, pero cuando hago clic en el elemento obtengo el valor del último elemento, no del que hice clic.

Esta es mi función:

const listItems = (id) => {
 if (!liste) {
 <div>no data</div>
 } else {
 return (
 <List>
 <ListItemButton onClick={() => handleClick(id)}>
  <ListItemText primary={liste?.[id]?.navn} />
  {handleOpen(id)? <ExpandLess />: <ExpandMore />}
 </ListItemButton>
 <Collapse in={handleOpen(id)} timeout="auto" unmountOnExit>
  <List component="div" disablePadding>
  {liste
 .filter((l) => l.tilhors_id === id)
 .map((l) => {
  return (
   <ListItemButton
   key={l.id}
   sx={{ pl: 4 }}
   >
   <ListItemText
   primary={
   <div>
    {l.navn}
   </div>
   }
   />{l.beloeb}{console.log(l.id)}
   <EditPost open={openModal} handleOpen={handleOpenModal} id={l.id} navn={l.navn} beloeb={l.beloeb} />
   <Button>X</Button>
   </ListItemButton>
  );
  })}
  </List>
 </Collapse>
 {liste.filter((k) => k.subtotal === id)
 .map((k) => {
  return (
  <ListItemButton key={k.id}>
  <ListItemText primary="Subtotal" />
  {k.beloeb}
  </ListItemButton>)
  })}
 </List>
 );
 }
};

este es mi EditPost:

<div>
 <ButtonIcon type='button' onClick={handleOpen} ><GrEdit/></ButtonIcon>
 <Modal tittel='Login' open={open} handleOpen={handleOpen} >
 <form onSubmit={handleSubmit(onSubmit)}>
  <div>
  <Chip label={navn} color='info' />
  <Controller
  control={control}
  name="beloeb"
  render={({ field: { onChange, onBlur, value, ref } }) =>
  <Text
   label="Beløb"
   onChange={onChange}
   onBlur={onBlur}
   selected={value}
  />
  }
  type="number"
  InputLabelProps={{
  shrink: true,
  }}
  />
  </div>
  <CustomizedButtons type="submit" label="Gem" disabled={isLoading} />
 </form>
 </Modal>
 </div>

Simplemente no entiendo por qué no obtiene el valor seleccionado

EDITAR

Aquí hay un enlace de codesandbox

Solución del problema

¡La caja de arena ayuda! Eché un vistazo al DOM, se declara una instancia modal por elemento de lista representado. Entonces, después del procesamiento inicial, si solo se expande la primera lista, que contiene un elemento, generará el modal esperado. Si las dos primeras listas se expanden, sabe que creó ocho instancias modales en la parte inferior del DOM (elementos con rolevalor de atributo "presentación") y, por lo tanto, se abre la última instancia.

No he codificado esta solución, pero lo que haría sería eliminarla Modalpara EditPostque no renderice varias Modalinstancias; representar una instancia singular en App.jssería una alternativa más apropiada. A partir de ahí, genera dinámicamente el contenido de la instancia modal a través de accesorios.