Small fixes on accounts settings (#6157)

- Add keys in components map

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx

@@ -11,6 +11,7 @@ import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/componen
 import { SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import React from 'react';
 
 export const SettingsAccountsCalendarChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
@@ -59,13 +60,13 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
         tabs={tabs}
       />
       {calendarChannels.map((calendarChannel) => (
-        <>
+        <React.Fragment key={calendarChannel.id}>
           {calendarChannel.id === activeTabId && (
             <SettingsAccountsCalendarChannelDetails
               calendarChannel={calendarChannel}
             />
           )}
-        </>
+        </React.Fragment>
       ))}
       {false && activeTabId === 'general' && (
         <SettingsAccountsCalendarChannelsGeneral />

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx

@@ -10,6 +10,7 @@ import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/compo
 import { SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import React from 'react';
 
 export const SettingsAccountsMessageChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
@@ -58,13 +59,13 @@ export const SettingsAccountsMessageChannelsContainer = () => {
         tabs={tabs}
       />
       {messageChannels.map((messageChannel) => (
-        <>
+        <React.Fragment key={messageChannel.id}>
           {messageChannel.id === activeTabId && (
             <SettingsAccountsMessageChannelDetails
               messageChannel={messageChannel}
             />
           )}
-        </>
+        </React.Fragment>
       ))}
     </>
   );

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
 import { Radio } from '@/ui/input/components/Radio';
 import { Card } from '@/ui/layout/card/components/Card';