Require cycles due to importing from index.js

Question

I am receiving warning on my react-native project:

Require cycles are allowed, but can result in uninitialized values. 
Consider refactoring to remove the need for a cycle.
Require cycle: src/navigation/index.js -> src/navigation/mainDrawerNavigator.js -> src/navigation/index.js

This is because I have a habit of exporting all the classes within a folder from the index.js file, and also importing from the specified index.js file (which is convenient, although I am not sure if it is correct practice, it looks like it is common though: here and here)

I have the following directory structure:

src/
   navigation/
      index.js
      mainDrawerNavigator.js
      homeTabNavigator.js
      otherNavigator.js

in index.js (I am exporting both mainDrawerNavigator and homeTabNavigator)

export {default as HomeTabNavigator} from './homeTabNavigator';
export {default as MainDrawerNavigator} from './mainDrawerNavigator';
export {default as OtherNavigator} from './otherNavigator';

the problem is in mainDrawerNavigator I need homeTabNavigator thus importing it like this

import { 
    HomeTabNavigator,
    OtherNavigator,
} from '@/navigation';  // this is the source of the warning

Is there a way to import from index.js without causing the require cycle?

I know I can import it this way:

import HomeTabNavigator from './homeTabNavigator';
import OtherNavigator from './otherNavigator';

But for some folders, I have a long list of exports in the index.js file and within the folder I wouldn't want to import each one by one (if possible)