Unable to resolve module nanoid/non-secure \node_mo@react- navigation\core|src\useRegisterNavigator.tsx: nanoid/non-secure could not be found

Question

enter image description here

the file is available as you can see. i have no idea whyh this error is coming up. the error says that this file can not be found in the folder, but it is clearly there

import { nanoid } from 'nanoid/non-secure';
import * as React from 'react';

import { SingleNavigatorContext } from './EnsureSingleNavigator';

/**
 * Register a navigator in the parent context (either a navigation container or a screen).
 * This is used to prevent multiple navigators under a single container or screen.
 */
export default function useRegisterNavigator() {
  const [key] = React.useState(() => nanoid());
  const container = React.useContext(SingleNavigatorContext);

  if (container === undefined) {
    throw new Error(
      "Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?\n\nThis can also happen if there are multiple copies of '@react-navigation' packages installed."
    );
  }

  React.useEffect(() => {
    const { register, unregister } = container;

    register(key);

    return () => unregister(key);
  }, [container, key]);

  return key;
}

this is the list of my dependencies

"dependencies": {
    "@expo/vector-icons": "^12.0.5",
    "expo": "~44.0.0",
    "expo-app-loading": "^1.3.0",
    "expo-font": "^10.0.5",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-reanimated": "~2.3.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^3.0.0",
    "react-navigation-header-buttons": "^8.0.0",
    "react-redux": "^7.2.8",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9"
  },