diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res
index 58fd16ccb..cf0953ab8 100644
--- a/src/components/ButtonGroupIp.res
+++ b/src/components/ButtonGroupIp.res
@@ -13,10 +13,11 @@ let make = (
 
   let buttons =
     options
-    ->Js.Array2.map(op => {
+    ->Array.mapWithIndex((op, i) => {
       let active = input.value->LogicUtils.getStringFromJson("") === op.value
       if isSeparate {
         <Button
+          key={i->string_of_int}
           text={op.label}
           onClick={_ => onChange(op.value)}
           buttonType={active ? Primary : SecondaryFilled}
@@ -26,6 +27,7 @@ let make = (
         />
       } else {
         <Button
+          key={i->string_of_int}
           text={op.label}
           onClick={_ => onChange(op.value)}
           textStyle={active ? "text-blue-800" : ""}
diff --git a/src/components/Chip.res b/src/components/Chip.res
index a869d2b76..ebe2ed923 100644
--- a/src/components/Chip.res
+++ b/src/components/Chip.res
@@ -1,29 +1,23 @@
 @react.component
 let make = (~values=[], ~showButton=false, ~onButtonClick=_ => (), ~converterFn=str => str) => {
-  <div>
-    {if values->Js.Array2.length !== 0 {
-      <div className="flex flex-wrap flex-row">
-        {values
-        ->Js.Array2.map(value => {
-          let onClick = _evt => {
-            onButtonClick(value)
-          }
-          <div
-            className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500  hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50  flex align-center w-max cursor-pointer  transition duration-300 ease">
-            {React.string(value->converterFn)}
-            {if showButton {
-              <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50">
-                <Icon className="align-middle" size=14 name="times" onClick />
-              </div>
-            } else {
-              React.null
-            }}
-          </div>
-        })
-        ->React.array}
-      </div>
-    } else {
-      React.null
-    }}
-  </div>
+  <UIUtils.RenderIf condition={values->Js.Array2.length !== 0}>
+    <div className="flex flex-wrap flex-row">
+      {values
+      ->Js.Array2.map(value => {
+        let onClick = _evt => {
+          onButtonClick(value)
+        }
+        <div
+          className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500  hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50  flex align-center w-max cursor-pointer  transition duration-300 ease">
+          {React.string(value->converterFn)}
+          <UIUtils.RenderIf condition={showButton}>
+            <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50">
+              <Icon className="align-middle" size=14 name="times" onClick />
+            </div>
+          </UIUtils.RenderIf>
+        </div>
+      })
+      ->React.array}
+    </div>
+  </UIUtils.RenderIf>
 }
diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res
index a2b73ee39..fe1a81be8 100644
--- a/src/components/CollapsableTableRow.res
+++ b/src/components/CollapsableTableRow.res
@@ -45,7 +45,8 @@ let make = (
           let cursorI = cellIndex == 0 ? "cursor-pointer" : ""
           let location = `${title}_tr${(rowIndex + 1)->Belt.Int.toString}_td${(cellIndex + 1)
               ->Belt.Int.toString}`
-          <AddDataAttributes attributes=[("data-table-location", location)]>
+          <AddDataAttributes
+            key={cellIndex->string_of_int} attributes=[("data-table-location", location)]>
             <td
               key={string_of_int(cellIndex)}
               className={`h-full p-0 align-top ${borderClass} ${hCell} ${cursorI}`}
@@ -81,7 +82,7 @@ let make = (
         {item
         ->Js.Array2.mapi((obj, index) => {
           let heading = headingArray->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-          <UIUtils.RenderIf condition={index !== 0}>
+          <UIUtils.RenderIf condition={index !== 0} key={index->string_of_int}>
             <div className="flex mb-5 justify-between">
               <div className="text-jp-gray-900 opacity-50 font-medium">
                 {React.string(heading)}
diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res
index f1d05a33e..9ddc3ad0f 100644
--- a/src/genericUtils/BreadCrumbNavigation.res
+++ b/src/genericUtils/BreadCrumbNavigation.res
@@ -57,10 +57,8 @@ let make = (
             },
           })
       }
-      <UIUtils.RenderIf condition=showCrumb>
-        <div
-          key={Belt.Int.toString(index)}
-          className={`flex ${flexDirection} ${childGapClass} items-center`}>
+      <UIUtils.RenderIf key={Belt.Int.toString(index)} condition=showCrumb>
+        <div className={`flex ${flexDirection} ${childGapClass} items-center`}>
           {if collapse {
             <div
               className="flex flex-row gap-1 text-jp-2-gray-100 font-medium items-center justify-center">
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/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index d3ea4e15b..4ee5031aa 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -169,7 +169,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
         {selectedOptions
         ->Array.mapWithIndex((item, i) => {
           let key = string_of_int(i + 1)
-          <div className="flex flex-row">
+          <div key className="flex flex-row">
             <div
               className="w-min flex flex-row items-center justify-around gap-2 h-10 rounded-md  border border-jp-gray-500 dark:border-jp-gray-960
                text-jp-gray-900 text-opacity-75 hover:text-opacity-100 dark:text-jp-gray-text_darktheme dark:hover:text-jp-gray-text_darktheme
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 10d32844e..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" : ""}
@@ -417,6 +418,7 @@ module MakeRuleField = {
     <div className="flex flex-wrap items-center">
       {Array.mapWithIndex(fields, (_, i) =>
         <RuleFieldBase
+          key={i->string_of_int}
           onClick={_ => onCrossClick(i)}
           isFirst={i === 0}
           id={`${ruleJsonPath}[${i->Belt.Int.toString}]`}
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>