- refactored state for sessionlist, and session active and pause states

src/components/SightingModal/SightingModal.tsx

@@ -127,8 +127,8 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             <div className="flex flex-col border-b border-gray-600 mb-4">
               <p className="text-gray-300">Hotlists</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
-                {hotlistNames.map((hotlistName) => (
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2">
+                {hotlistNames.map((hotlistName, index) => (
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
                     <p className="font-medium text-2xl break-all text-amber-800">
                       {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                     </p>