diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index 4c120e4d48..30cf9bd0e4 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, Fragment } from 'react'
 import type { Step } from './step'
 import { StepperStep } from './step'
 
@@ -7,28 +7,21 @@ export type StepperProps = {
   activeIndex: number
 }
 
-function join<T, R = T>(array: T[], sep: R): Array<T | R> {
-  return array.reduce((acc, item, index) => {
-    if (index === 0)
-      return [item]
-
-    return acc.concat([sep, item])
-  }, [] as Array<T | R>)
-}
-
 export const Stepper: FC<StepperProps> = (props) => {
   const { steps, activeIndex } = props
   return <div className='flex items-center gap-3'>
-    {join(
-      steps.map((step, index) => (
-        <StepperStep
-          key={index}
-          {...step}
-          activeIndex={activeIndex}
-          index={index}
-        />
-      )),
-      <div className="w-4 h-px bg-text-quaternary" />,
-    )}
+    {steps.map((step, index) => {
+      const isLast = index === steps.length - 1
+      return (
+        <Fragment key={index}>
+          <StepperStep
+            {...step}
+            activeIndex={activeIndex}
+            index={index}
+          />
+          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+        </Fragment>
+      )
+    })}
   </div>
 }