How can I set different icons based on Active tab or Inactive tab

[indranilduttapwc]

In my project, I've two different SVGs for Active and Inactive states. But in component, I can pass only one.
Can someone let me know how to do this with this library?

Right now I am doing it like this:

const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
  Home: {
    labelStyle: {
      color: Terracotta,
    },
    icon: {
      component: EmptyHomeSVG, **//here I need different SVG for every tab based on active/inactive**
      activeColor: Terracotta,
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: TerracottaSecondary,
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
  Properties: {
    labelStyle: {
      color: Terracotta,
    },
    icon: {
      component: EmptyWalletSVG,
      activeColor: Terracotta,
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: TerracottaSecondary,
      inactiveColor: 'rgba(247,215,243,0)',
    },
  },
  Discover: {
    labelStyle: {
      color: Terracotta,
    },
    icon: {
      component: EmptySearchSVG,
      activeColor: Terracotta,
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: TerracottaSecondary,
      inactiveColor: 'rgba(251,239,211,0)',
    },
  },
  Requests: {
    labelStyle: {
      color: '#E6A919',
    },
    icon: {
      component: EmptyHomeSVG,
      activeColor: 'rgba(230,169,25,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(251,239,211,1)',
      inactiveColor: 'rgba(251,239,211,0)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: EmptyHomeSVG,
      activeColor: 'rgba(17,148,170,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(207,235,239,1)',
      inactiveColor: 'rgba(207,235,239,0)',
    },
  },
};

One of my SVG for example:

import {BubbleTabBarIconProps} from '@gorhom/animated-tabbar';
import * as React from 'react';
import Animated from 'react-native-reanimated';
import Svg, {Path} from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(
  Path,
) as any as React.ComponentClass<
  Animated.AnimateProps<{}, PathProps & {style?: any}>
>;

Animated.addWhitelistedNativeProps({
  stroke: true,
});

const EmptyHomeSVG: React.FC<BubbleTabBarIconProps> = ({color, size}) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 24 24">
      <AnimatedPath
        d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
        stroke={color}
        strokeWidth={2}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

export default EmptyHomeSVG;

const DashboardOverview = () => {
  return (
    <Tab.Navigator
      screenOptions={{headerShown: false}}
      // eslint-disable-next-line react/no-unstable-nested-components
      tabBar={props => (
        <AnimatedTabBar
          iconSize={20}
          tabs={tabs}
          {...props}
          itemOuterSpace={6}
        />
      )}>
      <Tab.Screen
        name="Home"
        initialParams={{
          backgroundColor: tabs.Home.labelStyle.color,
          nextScreen: 'Properties',
        }}
        component={HomeScreen}
      />
      <Tab.Screen
        name="Properties"
        initialParams={{
          backgroundColor: tabs.Properties.labelStyle.color,
          nextScreen: 'Discover',
        }}
        component={HomeScreen}
      />
      <Tab.Screen
        name="Discover"
        initialParams={{
          backgroundColor: tabs.Discover.labelStyle.color,
          nextScreen: 'Requests',
        }}
        component={HomeScreen}
      />
      <Tab.Screen
        name="Requests"
        initialParams={{
          backgroundColor: tabs.Requests.labelStyle.color,
          nextScreen: 'Profile',
        }}
        component={HomeScreen}
      />
      <Tab.Screen
        name="Profile"
        initialParams={{
          backgroundColor: tabs.Profile.labelStyle.color,
          nextScreen: 'Home',
        }}
        component={HomeScreen}
      />
    </Tab.Navigator>
  );
};

I'm using
"@gorhom/animated-tabbar": "^2.1.2",
"react-native": "0.71.10",
"react-native-reanimated": "^2.14.4",

[indranilduttapwc]

@gorhom Can you please help me? It's urgent to know for my office project.