React Navigation を起動できません（Hello React Navigation時点で）

Question

React Native の初心者です。
アプリの画面遷移をするためにReact Navigationをインストールし、テストでReact Navigationのホームページにコードが記載されている「Hello React Navigation」のコードをコピー＆ペーストで試したところエラーが発生しました。

【エラーの内容】
Failed building JavaScript bundle.
Unable to resolve module @react-navigation/native from /Users/ユーザー名/test1/App.js: @react-navigation/native could not be found within the project or in these directories:
../node_modules/@react-navigation

If you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

3 | import * as React from 'react';
4 | import { View, Text } from 'react-native';

5 | import { NavigationContainer } from '@react-navigation/native';

|                                      ^

6 | import { createStackNavigator } from '@react-navigation/stack';
7 |
8 | function HomeScreen() {

【事前にインストールしているもの】
├── @react-native-community/masked-view@0.1.10
├── @react-navigation/native@5.9.2
├── @react-navigation/stack@5.14.2
├── react-native-gesture-handler@1.9.0
├── react-native-reanimated@1.13.2
├── react-native-safe-area-context@3.1.9
└── react-native-screens@2.17.1

npm info react-native version
0.63.4
npm info react version
17.0.1

★React Navigationのホームページで案内があったように、
「npm install @react-navigation/stack」でインストールをした際にエラーが出たので、
「npm install --save --legacy-peer-deps @react-navigation/stack」でインストールをしたのが原因なのかな・・・と感じています。

★MacBook Pro (13-inch, M1, 2020)を購入したばかりです。M1の場合、環境構築で色々と手間がかかっているという内容は拝見していますが、React Native を使える環境までは構築しています。

【コード】

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

分かりづらい点もあるかと思いますが、原因及び解決方法につきご教示いただけましたら幸いです。