From 90886f293f4bf09983d93ab4698d68aba8659038 Mon Sep 17 00:00:00 2001
From: sai6855 <fayazceg@gmail.com>
Date: Sun, 18 Aug 2024 13:37:41 +0530
Subject: [PATCH] fix

---
 .../material/guides/composition/composition.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
index f6aba55198155b..bcc950b96a85b0 100644
--- a/docs/data/material/guides/composition/composition.md
+++ b/docs/data/material/guides/composition/composition.md
@@ -40,12 +40,12 @@ The following example will render the `List` component with a `<nav>` element as
 
 ```jsx
 <List component="nav">
-  <ListItem button>
+  <ListItemButton>
     <ListItemText primary="Trash" />
-  </ListItem>
-  <ListItem button>
+  </ListItemButton>
+  <ListItemButton>
     <ListItemText primary="Spam" />
-  </ListItem>
+  </ListItemButton>
 </List>
 ```
 
@@ -67,10 +67,10 @@ function ListItemLink(props) {
 
   return (
     <li>
-      <ListItem button component={CustomLink}>
+      <ListItemButton component={CustomLink}>
         <ListItemIcon>{icon}</ListItemIcon>
         <ListItemText primary={primary} />
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }
@@ -101,10 +101,10 @@ function ListItemLink(props) {
 
   return (
     <li>
-      <ListItem button component={CustomLink}>
+      <ListItemButton component={CustomLink}>
         <ListItemIcon>{icon}</ListItemIcon>
         <ListItemText primary={primary} />
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }
@@ -118,7 +118,7 @@ In this example, we don't create any intermediary component:
 ```jsx
 import { Link } from 'react-router-dom';
 
-<ListItem button component={Link} to="/">
+<ListItemButton component={Link} to="/">
 ```
 
 :::warning