IStack does not satisfy the constraint ParamListBase

Question

Why I get this error ?

interface IStack
Type 'IStack' does not satisfy the constraint 'ParamListBase'.
  Index signature for type 'string' is missing in type 'IStack'.

Navbar.tsx

import React from 'react';
  import {
    Alert,
    Animated,
    Pressable,
    StyleSheet,
    TouchableOpacity,
    Text,
    View,
  } from 'react-native';
  import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
  import {Ionicons} from '@expo/vector-icons';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import Blogs from '../screens/Blogs';
import { useNavigation } from '@react-navigation/native';
import Blog from '../screens/Blog';

  export interface IStack {
    Home: undefined;
    Blogs: undefined;
    Blog: undefined;
    navigate: (name: string) => void;
  }

  type NavProp = NativeStackScreenProps<IStack, 'Blogs'>

  const StackNav = createNativeStackNavigator<IStack>();

  const TabBar = () => {
    const navigation = useNavigation<NavProp>();
    const _renderIcon = (routeName: string, selectedTab: string) => {
      let icon = '';

      switch (routeName) {
        case 'title1':
          icon = 'ios-home-outline';
          break;
        case 'title2':
          icon = 'settings-outline';
          break;
      }

      return (
        <Ionicons
          name={icon}
          size={25}
          color={routeName === selectedTab ? 'black' : 'gray'}
        />
      );
    };
    const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
      return (
        <TouchableOpacity
          onPress={() => navigate(routeName)}
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          {_renderIcon(routeName, selectedTab)}
        </TouchableOpacity>
      );
    };

    return (
      <View style={{ flex: 1 }}>
        <CurvedBottomBar.Navigator
          type="up"
          style={styles.bottomBar}
          strokeWidth={0.5}
          height={55}
          circleWidth={55}
          bgColor="white"
          initialRouteName="title1"
          borderTopLeftRight
          swipeEnabled
          renderCircle={({ selectedTab, navigate }) => (
            <Animated.View style={styles.btnCircleUp}>
              <TouchableOpacity
                style={{
                  flex: 1,
                  justifyContent: 'center',
                }}
                onPress={() => Alert.alert('Click Action')}>
                <Ionicons name={'apps-sharp'} color="gray" size={25} />
              </TouchableOpacity>
            </Animated.View>
          )}
          tabBar={renderTabBar}>
          <CurvedBottomBar.Screen
            name="title1"
            position="left"
            component={({ navigate }) => (
              <View style={{ backgroundColor: '#BFEFFF', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Pressable onPress={() => navigation.navigate('Blogs')}>
                  <Text>Press</Text>
                </Pressable>
              </View>
            )}
          />
          <CurvedBottomBar.Screen
            name="title2"
            component={({ navigate }) => (
              <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />
            )}
            position="right"
          />
        </CurvedBottomBar.Navigator>
      </View>
    );
  };

  export const StackS = () => {
    return (
      <StackNav.Navigator>
        <StackNav.Screen name="Home" component={TabBar} />
        <StackNav.Screen name="Blogs" component={Blogs} />
        <StackNav.Screen name="Blog" component={Blog} />
      </StackNav.Navigator>
    )
  };

....................................................................................................................................................................................................................................................................................................................................