Resutl showing book is not defined in console - reactjs

Question

I used to show my New arrival page from Home page when i select books. I Planned to show only a book that is selected in Home page book list. But its now showing in New arrival page right now. Please help me to get rid off.
import React from "react";
const BookDetails = (props) => {
console.log(props.book);
if (props.book === null) return <div></div>;
return (
<div>
<h3>{props.book.bookName}</h3>
</div>
);
};
export default BookDetails;
(This is another code i used my onclick fucntion)
import React from "react";
import Book from "../Representational/Book";
import { withRouter } from "react-router-dom";
const ComponentList = (props) => {
return props.books.map((item, index) => {
return (
<Book
bookName={item.bookName}
writer={item.writer}
publish={item.publish}
key={item.id}
selectedBookHandler={()=>props.selectedBookHandler(Book)}
/>
);
});
};
export default withRouter(ComponentList);
(Below are codes as main component)
import { Component } from "react";
import ComponentList from "./Lists/ComponentList";
import BookList from "../Assets/BookList";
import NewBook from "./Representational/NewBook";
import About from './Representational/About';
import {Route, NavLink} from 'react-router-dom';
import BookDetails from "./Representational/BookDetails";
class MainComponent extends Component {
constructor(props){
super(props)
this.state = {
books: BookList,
selectedBook: null
}
}
selectedBookHandler = books=>{
this.setState({
selectedBook: books
})
}
render() {
const newCopy = (
<ComponentList
books={this.state.books}
selectedBookHandler={this.selectedBookHandler}
/>
);
return (
<div className="book-project">
<nav className="nav-bar">
<ul>
<li>
<NavLink to="/" exact>Home</NavLink></li>
<li><NavLink to="/new">New Arrival</NavLink></li>
<li><NavLink to="/about-us">About Us</NavLink></li>
</ul>
</nav>
<div>
<Route path="/" exact render={()=> newCopy} />
<Route path="/new" exact component={NewBook}/>
<Route path="/about-us" exact component= {About}/>
<BookDetails book={this.state.selectedBook}/>
</div>
<div className="head">
<h1 className="appHeading head">New Book List</h1>
</div>
<div className="btn">
<button onClick={this.toggleBook}>Toggle</button>
<input type="text" onChange={this.changeInputState} />
</div>
</div>
);
}
}
export default MainComponent;
Please Help me.