rendering a book shelf using react

Question

i am trying to render 9 books than when i scroll down to the bottom of the page it renders more like youtube but for books for rendering 9 books i did this

import React from 'react';
import Books from "./Book.json"
   const Book=(props)=>{
let n = props.number
return(
    <div className="BookContainer">
        <img src={Books[n].Img} alt="" className="BookImg"/>
        <h1 className="Title">{Books[n].Title}</h1>
        <h2 className="Author">By: {Books[n].Auther}</h2>
    </div>
    )
}

export default Book

import React from "react"
import Book from './Book'
import './Book.css'
import Books from "./Book.json"
const BookFeed =()=>{
   return(
      <div className='books'>
         <Book number='0' />
         <Book number='1' />
      </div>
   )
}
export default BookFeed

i want to make a while loop that renders the books like

    import React,{useState} from "react"
    import Book from './Book'
       const CallBooks =(props)=>{
        let [Load, SetLoad] = useState(0)
          while (Load>props.number){
            return(
            <Book number={Load}/>
            )
            SetLoad(Load+1)
        }}
     export default CallBooks

takes one props which is how many books i want rendered