diff --git a/src/components/Login/PlexLoginButton.tsx b/src/components/Login/PlexLoginButton.tsx
index 111b95d3..9e7f8cd1 100644
--- a/src/components/Login/PlexLoginButton.tsx
+++ b/src/components/Login/PlexLoginButton.tsx
@@ -3,6 +3,7 @@ import Button from '@app/components/Common/Button';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import usePlexLogin from '@app/hooks/usePlexLogin';
 import defineMessages from '@app/utils/defineMessages';
+import { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 const messages = defineMessages('components.Login', {
@@ -46,8 +47,12 @@ const PlexLoginButton = ({
         >
           {(chunks) => (
             <>
-              {chunks.map((c) =>
-                typeof c === 'string' ? <span>{c}</span> : c
+              {chunks.map((c, index) =>
+                typeof c === 'string' ? (
+                  <span key={index}>{c}</span>
+                ) : (
+                  <Fragment key={index}>{c}</Fragment>
+                )
               )}
             </>
           )}