feat: rfc fixes

src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx

 import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
 import { MapOverlay } from '@/types/models';
+import { useMemo } from 'react';
 import { OverlayAxis } from '../OverlayAxis';
 import { OverlayDataAxis } from '../OverlayData.types';
 import { getAxesSortedByValue } from '../utils/getAxesSortedByValue';
@@ -12,6 +13,7 @@ interface Props {
 export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null => {
   const { idObject, name } = overlay;
   const overlayAxes = axes.filter(axis => axis.overlayId === idObject);
+  const sortedAxes = useMemo(() => getAxesSortedByValue(overlayAxes), [overlayAxes]);
 
   if (overlayAxes.length === SIZE_OF_EMPTY_ARRAY) {
     return null;
@@ -23,7 +25,7 @@ export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null
         {name}
       </div>
       <div className="my-1 h-[1px] w-full bg-divide" />
-      {getAxesSortedByValue(overlayAxes).map(axis => (
+      {sortedAxes.map(axis => (
         <OverlayAxis key={axis.title} axis={axis} />
       ))}
     </div>

src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx

 import { ZERO } from '@/constants/common';
 import { overlaysOpenedSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { GroupedOverlayAxes } from './GroupedOverlayAxes';
 import { OverlayAxis } from './OverlayAxis';
@@ -19,6 +20,7 @@ export const OverlayData = ({
   const axes = useOverlaysAxes({ isShowOverlayBioEntityName });
   const uniqueAxes = getUniqueAxes(axes);
   const openedOverlays = useSelector(overlaysOpenedSelector);
+  const sortedAxes = useMemo(() => getAxesSortedByValue(uniqueAxes), [uniqueAxes]);
 
   if (uniqueAxes.length === ZERO) {
     return null;
@@ -26,7 +28,7 @@ export const OverlayData = ({
 
   const overlaysAxesContent = (
     <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
-      {getAxesSortedByValue(uniqueAxes).map(axis => (
+      {sortedAxes.map(axis => (
         <OverlayAxis key={axis.title} axis={axis} />
       ))}
     </div>