diff --git a/src/components/news/CardGridSkeleton.tsx b/src/components/news/CardGridSkeleton.tsx
index caa0390..5b9b7e4 100644
--- a/src/components/news/CardGridSkeleton.tsx
+++ b/src/components/news/CardGridSkeleton.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/Skeleton';
 import { cx } from '@/lib/utils';
-import * as React from 'react';
+import { useId } from 'react';
 
 function CardGridSkeleton() {
   return (
@@ -13,7 +13,7 @@ function CardGridSkeleton() {
             index === 1 && 'col-span-1 row-span-1 md:col-span-2',
             index === 3 && 'xs:col-span-2 row-span-1 md:col-span-1',
           )}
-          key={React.useId()}
+          key={useId()}
         />
       ))}
     </div>
diff --git a/src/components/news/ItemGridSkeleton.tsx b/src/components/news/ItemGridSkeleton.tsx
index b3c8d90..52db860 100644
--- a/src/components/news/ItemGridSkeleton.tsx
+++ b/src/components/news/ItemGridSkeleton.tsx
@@ -1,11 +1,11 @@
 import { ArticleItemSkeleton } from '@/components/news/ArticleItemSkeleton';
-import * as React from 'react';
+import { useId } from 'react';
 
 function ItemGridSkeleton() {
   return (
     <div className='grid min-h-[752px] grid-cols-1 gap-4 sm:min-h-[368px] sm:grid-cols-2 lg:min-h-[240px] lg:grid-cols-3'>
       {Array.from({ length: 6 }).map(() => (
-        <ArticleItemSkeleton key={React.useId()} />
+        <ArticleItemSkeleton key={useId()} />
       ))}
     </div>
   );