use the same componetn for rendering reference in reaction elements

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx

@@ -18,6 +18,8 @@ import { getSearchData } from '@/redux/search/search.thunks';
 import { twMerge } from 'tailwind-merge';
 import { getTypeBySBOTerm } from '@/utils/bioEntity/getTypeBySBOTerm';
 import { ZERO } from '@/constants/common';
+import { AnnotationItem } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem';
+import React from 'react';
 import { PinListBioEntity } from './BioEntitiesPinsListItem.types';
 import { isPinWithCoordinates } from './BioEntitiesPinsListItem.utils';
 
@@ -108,19 +110,16 @@ export const BioEntitiesPinsListItem = ({
       {pin.references.length > ZERO && (
         <ul className="leading-6">
           <div className="font-bold">References:</div>
-          {pin.references.map(reference => {
-            return (
-              <li key={reference.id} className="my-2 px-2">
-                <a
-                  href={reference.link ? reference.link : undefined}
-                  target="_blank"
-                  className="cursor-pointer text-primary-500 underline"
-                >
-                  {reference.type} ({reference.resource})
-                </a>
-              </li>
-            );
-          })}
+          {pin.references.map(reference => (
+            <li key={reference.id} className="ml-3">
+              <AnnotationItem
+                key={reference.id}
+                type={reference.type}
+                link={reference.link}
+                resource={reference.resource}
+              />
+            </li>
+          ))}
         </ul>
       )}
     </div>