diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index fbfbd4a616..5e10262373 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -52,7 +52,7 @@
   },
   "peerDependencies": {
     "@griffel/react": "^1.0.0",
-    "react": ">=16.8.0 <18.0.0"
+    "react": ">=16.8.0 <=18.0.0"
   },
   "files": [
     "lib/",
diff --git a/packages/react-icons/src/utils/bundleIcon.tsx b/packages/react-icons/src/utils/bundleIcon.tsx
index 83d36c8fa5..42184ad315 100644
--- a/packages/react-icons/src/utils/bundleIcon.tsx
+++ b/packages/react-icons/src/utils/bundleIcon.tsx
@@ -10,12 +10,12 @@ const useBundledIconStyles = makeStyles({
 
 const bundleIcon = (FilledIcon: React.FC<FluentIconsProps>, RegularIcon: React.FC<FluentIconsProps>) => {
     const Component: React.FC<FluentIconsProps> = (props) => {
-        const { className, primaryFill = 'currentColor', filled } = props;
+        const { className, primaryFill = 'currentColor', filled, ...rest } = props;
         const styles = useBundledIconStyles();
         return (
             <React.Fragment>
                 <FilledIcon
-                    {...props}
+                    {...rest}
                     className={mergeClasses(
                         styles.root,
                         filled && styles.visible,
@@ -25,7 +25,7 @@ const bundleIcon = (FilledIcon: React.FC<FluentIconsProps>, RegularIcon: React.F
                     fill={primaryFill}
                 />
                 <RegularIcon
-                    {...props}
+                    {...rest}
                     className={mergeClasses(
                       styles.root,
                       !filled && styles.visible,