diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index 538cd6e99089d2..6d7a47426aceb1 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/packages/mui-material/src/Grid/Grid.js
@@ -250,11 +250,8 @@ const GridRoot = styled('div', {
     ...(ownerState.zeroMinWidth && {
       minWidth: 0,
     }),
-    ...(ownerState.wrap === 'nowrap' && {
-      flexWrap: 'nowrap',
-    }),
-    ...(ownerState.wrap === 'reverse' && {
-      flexWrap: 'wrap-reverse',
+    ...(ownerState.wrap !== 'wrap' && {
+      flexWrap: ownerState.wrap,
     }),
   }),
   generateDirection,
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index 33908c4a3a5159..5941c7a86a4e13 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -427,4 +427,29 @@ describe('<Grid />', () => {
       marginBottom: '16px',
     });
   });
+
+  describe('prop: wrap', () => {
+    it('should wrap by default', () => {
+      render(<Grid container data-testid="wrap" />);
+      expect(screen.getByTestId('wrap')).toHaveComputedStyle({
+        flexWrap: 'wrap',
+      });
+    });
+
+    it('should apply nowrap class and style', () => {
+      const { container } = render(<Grid container wrap="nowrap" data-testid="wrap" />);
+      expect(container.firstChild).to.have.class('MuiGrid-wrap-xs-nowrap');
+      expect(screen.getByTestId('wrap')).toHaveComputedStyle({
+        flexWrap: 'nowrap',
+      });
+    });
+
+    it('should apply wrap-reverse class and style', () => {
+      const { container } = render(<Grid container wrap="wrap-reverse" data-testid="wrap" />);
+      expect(container.firstChild).to.have.class('MuiGrid-wrap-xs-wrap-reverse');
+      expect(screen.getByTestId('wrap')).toHaveComputedStyle({
+        flexWrap: 'wrap-reverse',
+      });
+    });
+  });
 });