diff --git a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
index f4f65963e..951b18891 100644
--- a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
+++ b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
@@ -4,7 +4,7 @@ open RoutingUtils
 module SimplePreview = {
   @react.component
   let make = (~gateways) => {
-    if gateways->Js.Array2.length > 0 {
+    <UIUtils.RenderIf condition={gateways->Js.Array2.length > 0}>
       <div
         className="w-full mb-6 p-4 px-6 bg-white dark:bg-jp-gray-lightgray_background rounded-md border border-jp-gray-600 dark:border-jp-gray-850">
         <div
@@ -23,9 +23,7 @@ module SimplePreview = {
           ->React.array}
         </div>
       </div>
-    } else {
-      React.null
-    }
+    </UIUtils.RenderIf>
   }
 }
 module GatewayView = {
@@ -189,16 +187,15 @@ module RulePreviewer = {
                       {React.string(string_of_int(index + 1))}
                     </div>
                     <div> {gateway->React.string} </div>
-                    {if index !== ruleInfo.default_gateways->Js.Array2.length - 1 {
+                    <UIUtils.RenderIf
+                      condition={index !== ruleInfo.default_gateways->Js.Array2.length - 1}>
                       <Icon
                         name="chevron-right"
                         size=14
                         className="cursor-pointer text-jp-gray-700"
                         onClick={ev => ()}
                       />
-                    } else {
-                      React.null
-                    }}
+                    </UIUtils.RenderIf>
                   </div>
                 })
                 ->React.array}
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index f2d08737e..31f8ce1d6 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -19,9 +19,10 @@ module LogicalOps = {
 
     <ButtonGroup wrapperClass="flex flex-row mr-2 ml-1">
       {["AND", "OR"]
-      ->Js.Array2.map(text => {
+      ->Array.mapWithIndex((text, i) => {
         let active = logicalOpsInput.value->LogicUtils.getStringFromJson("") === text
         <Button
+          key={i->string_of_int}
           text
           onClick={_ => onChange(text)}
           textStyle={active ? "text-blue-800" : ""}
diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index c513079d5..108ccd419 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -142,8 +142,8 @@ module ExternalUser = {
                 {props => <>
                   <div className="px-1 py-1 ">
                     {options
-                    ->Js.Array2.map(option =>
-                      <Menu.Item>
+                    ->Js.Array2.mapi((option, i) =>
+                      <Menu.Item key={i->string_of_int}>
                         {props =>
                           <div className="relative">
                             <button
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index fc7e3f54f..fc2b730c0 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -65,6 +65,7 @@ module Configure3DSRule = {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           let i = 1
           <AdvancedRouting.Wrapper
+            key={index->string_of_int}
             id
             heading={`Rule ${string_of_int(index + i)}`}
             onClickAdd={_ => addRule(index, false)}
diff --git a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
index ed55e92a0..110caefcf 100644
--- a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
+++ b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
@@ -62,7 +62,10 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
       }
       let subOptionsArray = sidebarOption.subOptions->Belt.Option.getWithDefault([])
 
-      <div className={`p-6 border-y border-gray-200 cursor-pointer ${background}`} onClick>
+      <div
+        key={i->string_of_int}
+        className={`p-6 border-y border-gray-200 cursor-pointer ${background}`}
+        onClick>
         <div
           key={i->Belt.Int.toString}
           className={`grid grid-cols-12 items-center  ${textColor} font-medium gap-5`}>
@@ -79,7 +82,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
           condition={sidebarOption.status === ONGOING && subOptionsArray->Array.length > 0}>
           <div className="my-4">
             {subOptionsArray
-            ->Js.Array2.map(subOption => {
+            ->Js.Array2.mapi((subOption, i) => {
               let (subIcon, subIconColor, subBackground, subFont) = switch subOption.status {
               | COMPLETED => ("check", "green", "", "text-gray-600")
               | PENDING => ("nonselected", "text-gray-100", "", "text-gray-400")
@@ -87,6 +90,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
               }
 
               <div
+                key={i->string_of_int}
                 className={`flex gap-1 items-center pl-6 py-2 rounded-md my-1 ${subBackground} ${subFont}`}>
                 <Icon name=subIcon customIconColor=subIconColor customHeight="14" />
                 <span className="flex-1"> {subOption.title->React.string} </span>