./src/index.js Module not found: You attempted to import ../components/App のエラー解決方法

React初心者なんですが、componentsフォルダを作成してApp.jsを移動したらimportの部分で引っかかっちゃって
下記のエラーが出ちゃってうまくimportできてないのですが原因教えてくれたら幸いです。

./src/index.js
Module not found: You attempted to import ../components/App which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

App.js

react
1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4
5function App() {
6  return (
7    <div className="App">
8      <header className="App-header">
9        <img src={logo} className="App-logo" alt="logo" />
10        <p>
11          Edit <code>src/App.js</code> and save to reload.
12        </p>
13        <a
14          className="App-link"
15          href="https://reactjs.org"
16          target="_blank"
17          rel="noopener noreferrer"
18        >
19          Learn React
20        </a>
21      </header>
22    </div>
23  );
24}
25
26export default App;

index.js

react
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from '../components/App';
5import * as serviceWorker from './serviceWorker';
6
7ReactDOM.render(<App />, document.getElementById('root'));
8
9// If you want your app to work offline and load faster, you can change
10// unregister() to register() below. Note this comes with some pitfalls.
11// Learn more about service workers: https://bit.ly/CRA-PWA
12serviceWorker.unregister();

index.html

react
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <meta name="theme-color" content="#000000" />
8    <meta
9      name="description"
10      content="Web site created using create-react-app"
11    />
12    <link rel="apple-touch-icon" href="logo192.png" />
13    <!--
14      manifest.json provides metadata used when your web app is installed on a
15      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16    -->
17    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18    <!--
19      Notice the use of %PUBLIC_URL% in the tags above.
20      It will be replaced with the URL of the `public` folder during the build.
21      Only files inside the `public` folder can be referenced from the HTML.
22
23      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24      work correctly both with client-side routing and a non-root public URL.
25      Learn how to configure a non-root public URL by running `npm run build`.
26    -->
27    <title>React App</title>
28  </head>
29  <body>
30    <noscript>You need to enable JavaScript to run this app.</noscript>
31    <div id="root"></div>
32    <!--
33      This HTML file is a template.
34      If you open it directly in the browser, you will see an empty page.
35
36      You can add webfonts, meta tags, or analytics to this file.
37      The build step will place the bundled scripts into the <body> tag.
38
39      To begin the development, run `npm start` or `yarn start`.
40      To create a production bundle, use `npm run build` or `yarn build`.
41    -->
42  </body>
43</html>
44