Fixed no key error on bradcrumb

dashboard/src/components/Breadcrumb.tsx

@@ -1,28 +1,28 @@
 import { Steps } from "main/home/onboarding/types";
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 
 import styled from "styled-components";
 
 type Props = {
   currentStep: string;
-  steps: { value: string, label: string }[];
+  steps: { value: string; label: string }[];
   onClickStep: (step: string) => void;
 };
 
 const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
   return (
     <StyledBreadcrumb>
-      {steps.map((step: { value: string, label: string }, i: number) => {
+      {steps.map((step: { value: string; label: string }, i: number) => {
         return (
-          <>
-          <Crumb
-            bold={currentStep === step.value}
-            onClick={() => onClickStep(step.value)}
-          >
-            {step.label}
-          </Crumb>
-          {i !== steps.length - 1 && " > "}
-          </>
+          <Fragment key={i}>
+            <Crumb
+              bold={currentStep === step.value}
+              onClick={() => onClickStep(step.value)}
+            >
+              {step.label}
+            </Crumb>
+            {i !== steps.length - 1 && " > "}
+          </Fragment>
         );
       })}
     </StyledBreadcrumb>
@@ -31,11 +31,10 @@ const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
 
 export default Breadcrumb;
 
-const StyledBreadcrumb = styled.div`
-`;
+const StyledBreadcrumb = styled.div``;
 
 const Crumb = styled.span<{ bold: boolean }>`
   font-weight: ${(props) => (props.bold ? "600" : "normal")};
   font-size: 13px;
   cursor: pointer;
-`;
+`;