react-navigation ver6.0 shows an error when using navigation.navigate

What I'm facing

When I'm using navigation.navigate('XXXPage'), react-navigation ver 6.0 shows the following error.

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'.

What I did

I created the following file to declare interface RoomParamList.

• navigation.d.ts

import { CompositeScreenProps } from "@react-navigation/native";import { NativeStackScreenProps } from "@react-navigation/native-stack";import { MainStackParamList } from "./MainNavigator";import { SettingsStackParamList } from "./SettingsNavigator";type RootNavigationProps = CompositeScreenProps<  NativeStackScreenProps<MainStackParamList>,  NativeStackScreenProps<SettingsStackParamList>>;declare global {  namespace ReactNavigation {    interface RoomParamList extends RootNavigationProps {}  }}

These are MainNavigator and SettingsNavigator.

• MainNavigator

import React from "react";import { createNativeStackNavigator } from "@react-navigation/native-stack";import { MainPage } from "./main-navigator/MainPage";import { SettingsNavigator } from "./SettingsNavigator";export type MainStackParamList = {  MainPage: undefined;  SettingsPage: undefined;};const Stack = createNativeStackNavigator<MainStackParamList>();export const MainNavigator = () => {  return (<><Stack.Navigator><Stack.Screen          name="MainPage"          component={MainPage}          options={{ headerShown: false }}        /><Stack.Screen          name="SettingsPage"          component={SettingsNavigator}          options={{            presentation: "transparentModal",            headerShown: false,          }}        /></Stack.Navigator></>  );};

• SettingsNavigator

import React from "react";import { createNativeStackNavigator } from "@react-navigation/native-stack";import { SettingsPage } from "./settings-navigator/SettingPage";import { SettingsEmailPage } from "./settings-navigator/SettingsEmailPage";import { SettingsPasswordPage } from "./settings-navigator/SettingsPasswordPage";import { SettingsUserAvatarPage } from "./settings-navigator/SettingsUserAvatarPage";import { SettingsUsernamePage } from "./settings-navigator/SettingsUsernamePage";import { DeleteAccountPage } from "./settings-navigator/DeleteAccountPage";export type SettingsStackParamList = {  SettingsPage: undefined;  SettingsEmailPage: undefined;  SettingsPasswordPage: undefined;  SettingsBirthdayPage: undefined;  SettingsProfilePage: undefined;  SettingsUserAvatarPage: undefined;  SettingsUsernamePage: undefined;  DeleteAccountPage: undefined;};const Stack = createNativeStackNavigator<SettingsStackParamList>();export const SettingsNavigator = () => {  return (<><Stack.Navigator        initialRouteName={"SettingsPage"}        screenOptions={{          headerShown: true,          headerLargeTitleShadowVisible: false,          headerTransparent: true,        }}><Stack.Screen          name="SettingsPage"          component={SettingsPage}          options={{            headerShown: true,            headerShadowVisible: false,            headerTitle: "",            headerLargeTitleShadowVisible: false,            headerTransparent: true,            contentStyle: {              borderTopRightRadius: 12,              borderTopLeftRadius: 12,            },          }}        /><Stack.Screen          name="SettingsUserAvatarPage"          component={SettingsUserAvatarPage}        /><Stack.Screen          name="SettingsUsernamePage"          component={SettingsUsernamePage}        /><Stack.Screen name="SettingsEmailPage" component={SettingsEmailPage} /><Stack.Screen          name="SettingsPasswordPage"          component={SettingsPasswordPage}        /><Stack.Screen name="DeleteAccountPage" component={DeleteAccountPage} /></Stack.Navigator></>  );};

Technologies

• TypeScript(4.4.4)
• React(17.0.2)
• React Native(0.66.4)
• react navigation(6)