Как установить данные, полученные из функции, в некоторый констант и как преобразовать этот констант в массив для преобразования в таблицу

Question

У меня в настоящее время написан этот код:

файл library.js

import React from "react";
import { render } from "react-dom";
import { makeData, getBooksFromServer, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./LibraryStyling.css"


var response = null;


export default class Library extends React.Component {

constructor() {
    super();
    this.state = {
        booksInXML: getBooksFromServer(function (_response) {
           console.log(_response);

        }),
        data: makeData()
    };
    //this.handleClick();

    //this.handleClick = this.handleClick.bind(this)
}
onClick = async () => {

    var response1 = await ({

        booksInXML: getBooksFromServer(function (res) {
            console.log(res);
            response = res;
        })
    });
    console.log(response1);
};

render() {
    return (
        <div className='outside'>
            <button onClick={() => this.onClick()} className='button'>
                Click Me
            </button>
            <p>{console.log(this.state.booksInXML)}</p>


        </div>
    )

}
}

Функция файла Utils.js:

export function getBooksFromServer(callback) {
/*
console.log('Success!');
axios.get('http://localhost:52312/BookService.asmx/GetAllBooks')
    .then(response => this.setState({ booksFromServer: response}))
*/

let xmls =
    '<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">\
        <soap12:Body>\
                <GetAllBooks xmlns="api/BookService" />\
            </soap12:Body>\
        </soap12:Envelope>';

axios.post('http://localhost:52312/BookService.asmx?wsdl',
    xmls,
    {
        headers:
        {
            'Content-Type': 'text/xml',
            SOAPAction: 'api/BookService/GetAllBooks'
        }
    }).then(res => {
        var XMLParser = require('react-xml-parser');
        var InXML = new XMLParser().parseFromString(res.data);
        var booksInXML = InXML.getElementsByTagName('Book');
        //console.log(booksInXML);
        callback(booksInXML);
        //return booksInXML;
    }).catch(Error => {
        console.log(Error.response.data)
        //return err.response.data;
    });
}

Работает нормально и в консоли.log function мой объект, который я получаю от веб-сервиса, в основном отображается в консоли, но я не могу понять, как отобразить все данные на моей веб-странице.Есть ли простой способ сделать это, и если да, то может ли кто-нибудь привести несколько примеров?

Это изображение того, как консоль отображает мои данные, если я получаю их из свойства booksInXML, и как отображаются данные из функции: введите описание изображения здесь