fix: minor changes

frontend/src/Hero.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import { useTranslation } from 'react-i18next';
 export default function Hero({
@@ -24,10 +25,10 @@ export default function Hero({
       </div>
       <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm  lg:grid-cols-2">
         {demos?.map(
-          (demo: { header: string; query: string }) =>
+          (demo: { header: string; query: string }, key: number) =>
             demo.header &&
             demo.query && (
-              <>
+              <Fragment key={key}>
                 <button
                   onClick={() => handleQuestion(demo.query)}
                   className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
@@ -37,7 +38,7 @@ export default function Hero({
                   </p>
                   <span className="text-gray-400">{demo.query}</span>
                 </button>
-              </>
+              </Fragment>
             ),
         )}
       </div>