Cannot update a component while rendering a different component react-navigation

I'm building an app using expo and react native. In my project, I have a stackNavigator containing three stackScreen and I also have a DatabaseManager class with static async function. In my components, I use useState and useEffect to load my data and display them.
When I move from the first Screen to the second one, I got an error :

>Warning: Cannot update a component (%s) while rendering a different component (%s). To locate the bad setState() call inside %s, follow the stack trace as described in https://reactjs.org/link/setstate-in-render%s, StackNavigator, Screen, Screen.

This warning is, I suppose the reason why I need to tap 2 times on the screen to navigate between screens sometimes.

Here's a part of my code:

export default class DatabaseManager {
    ...
    static async getSplits(){
        if (!this.db)
            await this.openDatabase();
        const query = "select distinct day from exercises";
        const resultQuery = await this.executeSql(query, []);
        const result = [];
        var rows = resultQuery.rows;
        for (let i = 0; i < rows.length; i++) {
            var item = rows.item(i);
            result.push({split: item.DAY});
        }
        return result;

    }

    static async getExercises( split){
        if (!this.db)
            await this.openDatabase();
        const query = "select distinct name from exercises where day = ? order by number";
        const resultQuery = await this.executeSql(query, [split]);
        const result = [];
        var rows = resultQuery.rows;
        for (let i = 0; i < rows.length; i++) {
            var item = rows.item(i);
            result.push({name: item.NAME});
        }
        return result    
   }

}

App.js

//...
function HomeStackScreen() {


  return (
    <HomeStack.Navigator initialRouteName='Home'  >
      <HomeStack.Screen name="Home" component={Home} options={{title:'Splits'} }/>
      <HomeStack.Screen name="Screen" component={Screen} />
    </HomeStack.Navigator>
  );
}
...

export default function Home ({navigation}){
  const [splits, setSplits] = useState([{ split:''}]);
  const handlePress = async (split) => {

    navigation.navigate('Screen', {split: split});
    };

  useEffect(() => {
      const dataFetch = async () => {
        const data = await DatabaseManager.getSplits();
        setSplits(data);
      }
      dataFetch();
  }, [])

    return (
        <View style={styleHome.container}>
            <ScrollView style={styleHome.scrollViewContainer}>
              {splits.map((split, index) => (
                <View style={styleHome.touchableContainer} key={index}>
                  <Pressable
                    key={split.split}
                    style={styleHome.touchable}
                    activeOpacity={1}
                    onPress={() => handlePress(split.split)}
                  >
                    <Text style={styleHome.textTouchable}>{split.split}</Text>
                  </Pressable>
                </View>
  
              ))}
            </ScrollView>
          </View>
      
    );

The second screen is similar to this.

I tried to use useFocusEffect, enableFreeze and useFocus. I also tried to put a Loading Screen before navigating to a new screen, nothing solve the issue. By using some console.log, I found out that my code seems to be correct, the Home component doesn't re render after navigating to the other component.

I found out the solution: I just had a bad navigation.setOptions() in the second screen ...
I wrapped it in the useEffect() and it works fine.

I found the solution there: https://github.com/react-navigation/react-navigation/issues/9478#issuecomment-813031134