실행이 잘 되지않습니다.

안녕하세요 import문에서 일부 입력하면 뒤에 경로가 자동으로 생성되는 부분에서 자꾸 소문자로 변하길래 수정해 주니 빨간 줄이 뜹니다.

또한 경로의 대소문자에 상관없이 실행이 어렵습니다. 확인 부탁 드립니다.

코드와 오류 나는 부분 첨부 합니다.

Book.jsx

import React from "react";

function Book(props){
    return(
        <div>
            <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이 책은 총  ${props.numOfPage}로 이루어져 있습니다.`}</h2>
        </div>
    );
}
export default Book;

Library.jsx

import React from "react";
import Book from "./Book";

function Library(props){
    return(
        <div>
            <Book name="책 1" numOfPage ={100}/>
            <Book name="책 2" numOfPage ={200}/>
            <Book name="책 3" numOfPage ={300}/>
        </div>
    );
}
export default Library;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './ch03/Library';

ReactDOM.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);