Error trying to assign color when navigating between tabs with react navigation

Question

I am doing navigation between tabs using react navigation, the navigation is done correctly, as well as my custom tabBarLabel classes, but I am encountering a problem and that is that tabBarIndicatorStyle is assigning it to a previous tab, not the current one, how could I correct this error? This is my code:

import AsyncStorage from '@react-native-async-storage/async-storage';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {useIsFocused} from '@react-navigation/native';
import axios from 'axios';
import React, {useEffect, useState} from 'react';
import {ActivityIndicator, Text, View} from 'react-native';
import {Constants} from '../config/constants';
import {getAdvancedSearchAduanaService} from '../services/advancedSearch.service';
import Cards from './Cards';
import styles from './Style';

const CardList = ({route}) => {
  const {screenProps} = route.params;

  const [data, setData] = useState([]);
  const [action, setAction] = useState({});
  const [config, setConfig] = useState([]);
  const [advancedSearch, setAdvancedSearch] = useState([]);
  const [collapseConfig, setCollapseConfig] = useState([]);
  const [pag, setPag] = useState(1);
  const [totalPag, setTotalPag] = useState(1);
  const [limit, setLimit] = useState(10);
  const [totalData, setTotalData] = useState(0);
  const [search, setSearch] = useState('');
  const [loadData, setLoadData] = useState(false);
  const [clientsSelected, setClientsSelected] = useState('[]');
  const [advancedObj, setAdvancedObj] = useState([]);

  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log(`Tab ${route.name} está activo`);
    }
  }, [isFocused]);

  const setAdvanced = (advancedSearch) => {
    let obj = [];
    const newData = JSON.parse(JSON.stringify(advancedSearch));

    newData.map((e) => {
      e.values.map((f) => {
        let objPush = {
          id: f.id,
          isDate: f.type === 'dateRange' ? true : false,
          value:
            f.type === 'dateRange'
              ? f.value && f.value2
                ? {
                    init: f.value,
                    end: f.value2,
                  }
                : ''
              : f.value
              ? f.value
              : '',
        };
        obj.push(objPush);
      });
    });
    setAdvancedObj(obj);
    setPag(1);

    return obj;
  };

  const initializeSearchedData = async () => {
    const dataSearched = await getAdvancedSearchAduanaService();

    return dataSearched?.origin && dataSearched?.origin === route?.name
      ? setAdvanced(dataSearched.advancedSearch)
      : dataSearched?.advancedSearch;
  };

  const getCatalogs = async () => {
    setLoadData(false);
    // const routeName = route.name;
    const selectedClients = await AsyncStorage.getItem('clientsSelected');
    if (selectedClients) {
      try {
        setClientsSelected(selectedClients);
        await requestData(selectedClients);
      } catch (error) {
        console.log('error Integrada', error.response);
        setClientsSelected(selectedClients);
        await requestData(selectedClients);
      } finally {
        setLoadData(true);
      }
    }
  };

  const requestData = async (res) => {
    const dataSearched = await initializeSearchedData();

    const obj = {
      search,
      limit,
      pag,
      client: res,
      EsDTA: route.name === 'Impo' ? 0 : 1,
      advanced: dataSearched ?? advancedObj,
    };
    let url = `${Constants.API_TRAZABILIDAD}customs/listCustomImports`;
    if (route.name === 'Expo') {
      url = `${Constants.API_TRAZABILIDAD}customs/listCustomExport`;
    }

    try {
      const response = await axios.post(url, obj);
      const newTotal = response.data.data[0]
        ? Number(response.data.data[0].Total)
        : 0;
      const newAllData = response.data.data.map((item) => ({
        ...item,
        image: 2,
      }));
      setData(res === undefined ? [] : newAllData);
      setTotalData(newTotal);
      setTotalPag(Math.ceil(newTotal / limit));
    } catch (error) {
      console.log('error Integrada', error.response);
      setData([]);
      setTotalData(0);
      setTotalPag(0);
    }
  };

  const loadMore = async () => {
    let newPag = pag + 1;
    let obj = {
      search,
      limit,
      pag: newPag,
      client: clientsSelected,
      EsDTA: route === 'Impo' ? 0 : 1,
      advanced: advancedObj,
    };
    setPag(newPag);
    await requestChange(obj);
  };

  const requestChange = async (obj) => {
    let url = `${Constants.API_TRAZABILIDAD}customs/listCustomImports`;
    if (route.name === 'Expo') {
      url = `${Constants.API_TRAZABILIDAD}customs/listCustomExport`;
    }
    axios
      .post(url, obj)
      .then((response) => {
        let newAllData = data.concat(response.data.data);
        newAllData.map((e) => {
          e.image = 2;
        });
        setData(newAllData);
        setLoadData(true);
      })
      .catch((error) => {
        setData([]);
        setLoadData(true);
        console.log('error Integrada', error.response);
      });
  };

  useEffect(() => {
    const {action, config, collapseConfig, data} = screenProps;
    switch (route.name) {
      case 'Impo':
        setData(data);
        setAdvancedSearch(screenProps.advancedSearch);
        setAction(action);
        setConfig(config);
        setCollapseConfig(collapseConfig);
        break;
      case 'DTAs':
        setData(screenProps.dataDta);
        setAdvancedSearch(screenProps.advancedSearchDta);
        setAction(screenProps.actionDta);
        setConfig(screenProps.configDta);
        setCollapseConfig(screenProps.collapseConfigDta);
        break;
      default:
        setData(screenProps.dataExpo);
        setAdvancedSearch(screenProps.advancedSearchExpo);
        setAction(screenProps.actionExpo);
        setConfig(screenProps.configExpo);
        setCollapseConfig(screenProps.collapseConfigExpo);
    }
    getCatalogs();
  }, []);

  return (
    <View style={styles.bodyTabInternational}>
      {loadData ? (
        <Cards
          data={data}
          config={config}
          collapseConfig={collapseConfig}
          action={action}
          navigation={screenProps.navigation}
          mapData={screenProps.mapData}
          mapCard={screenProps.mapCard}
          mapCardData={screenProps.mapCardData}
          charts={screenProps.charts}
          map={true}
          loadMore={() => loadMore()}
          advanced={true}
          graphs={true}
          advancedSearch={advancedSearch}
          routeName={route.name}
          route="Customs"
          setSearch={setSearch}
        />
      ) : (
        <View style={styles.containerLogin}>
          <ActivityIndicator size="large" color="#003F70" />
        </View>
      )}
    </View>
  );
};

const Tab = createMaterialTopTabNavigator();

const MyApp = ({screenProps}) => {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log(`Tab  está activo`);
    }
  }, [isFocused]);

  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarLabel: () => {
          let title;
          if (route.name === 'Impo') title = 'Importaciones';
          else if (route.name === 'DTAs') title = 'DTAs';
          else title = 'Exportaciones';
          return <Text style={styles.focusedStyleList}>{title}</Text>;
        },
        tabBarIndicatorStyle: {
          backgroundColor: 'red',
        },
      })}>
      <Tab.Screen
        name="Impo"
        component={CardList}
        initialParams={{screenProps}}
      />
      <Tab.Screen
        name="DTAs"
        component={CardList}
        initialParams={{screenProps}}
      />
      <Tab.Screen
        name="Expo"
        component={CardList}
        initialParams={{screenProps}}
      />
    </Tab.Navigator>
  );
};

export default MyApp;