How do I iterate through an array in react using the map method ?

I have just started learning react and have stumbled into a problem. I am completely confused at this point. 
I have an array of books and I am trying to iterate through them. There are two functional components that are used - BookList and Book. Books is an array and I have created a new var called as list which iterates the Books array using the .map() method. 

I am getting an error like this: 
ReferenceError: Cannot access 'Book' before initialization

Pls can someone guide me in the right direction .....

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

let Books = [
  {
    image: "https://m.media-amazon.com/images/I/51upMbxwYPL.jpg",
    title: "Charlie and the Chocolate Factory",
    author_name: "Roald Dahl",
  },
  {
    image: "https://m.media-amazon.com/images/I/51H2M2jWmvL.jpg",
    title: "The Blue Umbrella",
    author_name: "Ruskin Bond",
  },
];

const list = Books.map((book) => {
  return (
    <Book
      image={book.image}
      title={book.title}
      author_name={book.author_name}
    />
  );
});

const BookList = () => {
  return <section className="booklist">{list}</section>;
};

const Book = (props) => {
  return (
    <article className="book">
      <img src={props.image} alt="" />
      <h1>{props.title}</h1>
      <p style={{ color: "green", fontFamily: "monospace", fontSize: "25px" }}>
        {props.author_name}
      </p>
    </article>
  );
};

ReactDom.render(<BookList />, document.getElementById("root"));