fix(hidden): stabilize onlyKey and remove eslint suppression

Signed-off-by: Sbragul26 <sbragul26@gmail.com>

Author: Sbragul26

src/base/Hidden/Hidden.tsx

@@ -39,12 +39,10 @@ export const Hidden = ({
 }: HiddenProps) => {
   const theme = useTheme();
 
-  // Serialize `only` to a stable string so that array literals passed as props
-  // (e.g. only={['xs', 'md']}) don't defeat memoization due to new references.
-  const onlyKey = Array.isArray(only) ? only.join(',') : only ?? '';
+  const onlyKey = Array.isArray(only) ? [...only].sort().join(',') : only ?? '';
 
   const mediaQuery = useMemo(() => {
-    const onlyValues = Array.isArray(only) ? only : only ? [only] : [];
+    const onlyValues = onlyKey ? (onlyKey.split(',') as Breakpoint[]) : [];
     const upProps: Record<Breakpoint, boolean> = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp };
     const downProps: Record<Breakpoint, boolean> = { xs: xsDown, sm: smDown, md: mdDown, lg: lgDown, xl: xlDown };
     const conditions: string[] = [];
@@ -62,7 +60,6 @@ export const Hidden = ({
     }
 
     return conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onlyKey, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]);
 
   const matches = useMediaQuery(mediaQuery);