Reactjs APIから取得した配列データを表示する方法は？

私はreactの初心者で、アプリケーションの配列から取得したデータを表示しようとしています。axiosでgetリクエストを行うと、応答に配列が表示されます。この配列を表示するためにインターネットで見つけたチュートリアルに従おうとしましたが、機能しませんでした。私のコードをチェックして、何が問題なのか教えてもらえますか？私のコードが完全に間違っている場合、配列を表示する方法を教えていただけますか？前もって感謝します

class Dashboard extends Component {
    state = { data: [] };

    static propTypes = {
        history: PropTypes.object.isRequired,
    }
    
    constructor(props) {
        super(props);
    }

    getAllLibri = async () => {
        let JWTToken = localStorage.getItem("token");
        const response = axios
            .get("http://g0ptrkwkej5fhqfl.myfritz.net:8090/api/libri/getAll", {
                headers: { Authorization: `${JWTToken}` },
            })
            .then((response) => {
                console.log(response.data);
                console.log(JWTToken);
                this.setState({ data: response.data });
            })
            .catch((error) => console.error(`Error:  ${error}`));
    }



    render() {
        return (
            <Navbar bg="light" expand="lg">
                <Navbar.Brand href="#home">Benvenuto!</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="">Inserisci libro</Nav.Link>
                        <NavDropdown title="Libri" id="basic-nav-dropdown">
                            <NavDropdown.Item onClick={this.getAllLibri} href="#action/3.1">
                                Visualizza libri
                  <div>{this.state.data.length}</div>
                            </NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    <Form inline>
                        <Button onClick={this.doLogout} variant="outline-success">
                            Logout
              </Button>
                    </Form>
                </Navbar.Collapse>
            </Navbar>)
    }
}

これは、getリクエストから取得した配列データです