How to get MongoDB data to select option using NodeJS

I am trying to populate MongoDB data to html select option.

This is what I have done so far

1. I have created a database books and created collection AuthorDB

2. I manually inserted data (to check if it really is working)

3. But when I used postman to get data, I get an empty array means no data. (But I have inserted data to AuthorDB collection)

Here is my server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const BookDB = require('./book-dbmodel');
const AuthorDB = require('./author-dbmodel');

const app = express();
const router = express.Router();

app.use(bodyParser.json());
app.use(cors());
app.use('/books', router);

//connect to books database
mongoose.connect('mongodb://127.0.0.1:27017/books', {useNewUrlParser: true});

const connection = mongoose.connection;
connection.once('open', () => {
    console.log("Connected to MongoDB via port 27017");
});

app.listen(4000, () => {
    console.log('Listening to port 4000');
});

// add book http://localhost:4000/books/add
router.route('/add').post((req, res) => {
    let bookDB = new BookDB(req.body);
    bookDB.save().then((bookDB) => {
        res.status(200).send(`${bookDB} Added!`);
    }).catch((err) => {
        res.status(400).send({message: err});
    });
});


//get all authors http://localhost:4000/books/authors
router.route('/authors').get((req, res) => {
    AuthorDB.find((err, authors) => {
        if(err) throw err;
        res.status(200).send(authors);
    });
});

//get books by author name http://localhost:4000/books/authors/authorName
router.route('/authors/authorName').get((req, res) => {
    let authorName = req.params.authorName;
    BookDB.find({firstName: {$regex: `${authorName}`, $options: "i"}}, (err, books) => {
        if(err) throw err;
        res.status(200).send(books);
    });
});

And this is my App.js in front-end:

import React, {Component} from 'react';
import axios from 'axios';

const ShowAuthors = (props) => (
    <option value={props.author.firstName}>{props.author.firstName}</option>
);
export default class AddBooks extends Component{

    constructor(props){
        super(props);

        this.state = {
            authorArray: [],
            name: '',
            isbn: 0,
            author: '',
            price: 0,
            yearOfPublication: 0,
            publisher: ''
        }
    }



    //to get author list on dropdown select
    componentDidMount(){
        axios.get('http://localhost:4000/books/authors/')
        .then(authors => {
            console.log(authors.data);
            this.setState({
                authorArray: authors.data
            });
        }).catch(err => {
            console.log(err);
        });
    }

    getAuthors(){   
        return this.state.authorArray.map((currentAuthor, id) => {
            return <ShowAuthors author={currentAuthor} key={id} />
        });
    }

    onSubmit(){

    }
    onChangeName(){

    }
    onChangeISBN(){

    }

    render(){
        return(
            <div className="container">
                <h1>Add Books</h1>

                <form onSubmit={this.onSubmit}>

                <div className="form-group">
                    <label htmlFor="book-name">Book Name</label>
                    <input
                    value={this.state.name} 
                    onChange={this.onChangeName}
                    type="text" className="form-control" id="book-name" aria-describedby="emailHelp" placeholder="Book Name"/>                    
                </div>

                <div className="form-group">
                    <label htmlFor="book-isbn">ISBN</label>
                    <input
                    value={this.state.isbn} 
                    onChange={this.onChangeISBN}
                    type="number" className="form-control" id="book-isbn" aria-describedby="emailHelp" placeholder="ISBN"/>                    
                </div>


                <div className="form-group">
                    <label htmlFor="author-name">Authors</label>
                    <select

                    className="form-control" name="authors" id="authors">
                        {this.getAuthors()} {/* this doesn't return anything but an empty array */}
                    </select>
                </div>

                <div className="form-group">
                    <label htmlFor="book-price">Book Price</label>
                    <input type="number" className="form-control" id="book-price" name="book-price" aria-describedby="emailHelp" placeholder="Book Price"/>                    
                </div>

                <div className="form-group">
                    <label htmlFor="book-year">Published Year</label>
                    <input type="number" className="form-control" id="book-year" name="book-year" aria-describedby="emailHelp" placeholder="Year"/>                    
                </div>                

                <div className="form-group">
                    <label htmlFor="book-publisher">Book Publisher</label>
                    <input type="number" className="form-control" id="book-publisher" name="book-publisher" aria-describedby="emailHelp" placeholder="Publisher"/>                    
                </div>


                </form>
            </div>
        );
    }
}

And this is my mongodb visualization:

And this is my AuthorDB schema model:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let AuthorDB = new Schema({
    firstName: {type: String},
    lastName: {type: String},
    nationality: {type: String}
});

module.exports = mongoose.model('AuthorDB', AuthorDB);