Strike through any item in a list created using material ui and Reactjs

I am trying to strike through a list item once a user has clicked on that particular item.

I have created a function to conduct the style change

const completed = () =>{     return document.getElementById("demo").style.textDecoration='line-through'};

The list is generated as below, i have used material ui library

<List dense={dense} >      {items.slice(0).reverse().map(x=> (<ListItem key={x.id} button id="demo" onClick={completed} divider><ListItemText primary={listItems(x)}/><ListItemSecondaryAction /></ListItem>       ))}                              </List>

From the code i have written i am able to strike only through the first item of the list. Whenever i add new items , always the only item i am able to strike through is the first item.

I am trying to find a way to apply this to all the elements on the list