I’m using React Native with React Navigation. I want to conditionally render the headerLeft component based on the value of isInitial. If isInitial is true, I want the headerLeft to render as shown in the code below. If isInitial is false, I want the default back arrow chevron to appear. How can I achieve this?

Here’s the code for when isInitial is true:

useFocusEffect(
    useCallback(() => {
      const isInitial = route.params?.isInitial;

      console.log({isInitial});

      navigation.setOptions({
        headerStyle: {
          backgroundColor: sessionDetail?.title
            ? backgrounds(sessionDetail?.title, true)
            : '',
        },
        headerLeft: () =>
          isInitial ? (
            <TouchableOpacity
              onPress={() =>
                navigation.reset({
                  routes: [
                    {
                      name: 'mainTab',
                      state: {
                        routes: [{name: 'inspection'}],
                      },
                    },
                  ],
                })
              }>
              <Title>Home</Title>
            </TouchableOpacity>
          ) : (
            true
          ),
        headerBackVisible: !isInitial,
        headerTitle: '',
      });

      const isFinishedAllTests = sessionDetail?.imtests_details?.every(
        item => item.is_done,
      );
      if (isFinishedAllTests && sessionDetail?.status === 'TEST_IN_PROGRESS') {
        setTimeout(() => {
          setCompleteModalVisible(true);
        }, ANIMATION_DURATION * 1.5);
      }
    }, [navigation, sessionDetail, route.params?.isInitial]),
  );