chore: optimization of code

src/features/profile/components/security/RecentLogins.tsx

@@ -2,6 +2,7 @@ import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
+import React from 'react';
 
 export function RecentLogins() {
   const { t } = useTranslation('security');
@@ -46,7 +47,7 @@ export function RecentLogins() {
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
             {data.map((d) => (
-              <>
+              <React.Fragment key={d.id}>
                 <Box
                   sx={{
                     display: 'flex',
@@ -54,7 +55,6 @@ export function RecentLogins() {
                     alignItems: { xs: 'flex-start', sm: 'center' },
                     minHeight: 50,
                   }}
-                  key={d.id}
                 >
                   <Typography
                     variant="body2"
@@ -117,7 +117,7 @@ export function RecentLogins() {
                   </Box>
                 </Box>
                 <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
-              </>
+              </React.Fragment>
             ))}
           </Box>
         </Box>