Error: Cannot read property 'map' of undefined (state) inside render method

In my project I have a table from react material ui. I am getting an error while filling this table when I use data from state to fill the table. The error is cannot read property 'map' of undefined. The line where it occurs will be marked in the code snippet below.

Here is my code (the error is in the JSX render method):

class AllBooks extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
          rows: []
        };
    }

    componentDidMount() {
        console.log('component mounted!');

        axios.get('http://localhost:8080/all-books').then(allBooks => {
            console.log(allBooks.data);

            this.setState({
                rows: allBooks
            });
        });

    }

    onAddButtonClick = (row) => {
        console.log('onAddButton click!');
        console.log(row);
        //axios.post('http://localhost:8080/addBookToRentedBooks', { email: this.state.email, 
title: this.state.title, message: this.state.message }).then();
    }

    test = () => {
        console.log(this.state.rows.data);

        this.state.rows.data.map(row => console.log(row));
    }

    render() {
        return (

            <div>
                <Grid container spacing={3}>
                    <Grid item xs={6} sm={3}></Grid>
                    
                    <Grid item xs={6} sm={6}>
                        <h1 style={{textAlign: 'center'}}>All Books</h1>
                        <br /><br />

                        <TableContainer component={Paper}>
                            <Table  aria-label="simple table">
                                <TableHead>
                                    <TableRow>
                                        <TableCell >Title</TableCell>
                                        <TableCell align="right">Author</TableCell>
                                        <TableCell align="right">ISBN</TableCell>
                                        <TableCell align="right">Year</TableCell>
                                        <TableCell align="center">Actions</TableCell>
                                    </TableRow>
                                </TableHead>

                                <TableBody>
                                    {this.state.rows.data.map((row) => (
                                        <TableRow key={row.name}>
                                            <TableCell component="th" scope="row">
                                                {row.name}
                                            </TableCell>
                                            <TableCell align="right">z</TableCell>
                                            <TableCell align="right">z</TableCell>
                                            <TableCell align="right">z</TableCell>
                                            <TableCell align="center">
                                        
                                                    <IconButton onClick={ () => this.onAddButtonClick(row) }>
                                                        <AddCircleOutlineIcon />
                                                    </IconButton>

                                            </TableCell>
                                        </TableRow>
                                ))}
                                </TableBody>
                            </Table>
                                    </TableContainer>
                    </Grid>

                    <Grid item xs={6} sm={3}><button onClick={this.test}>click me</button></Grid>
                </Grid>
            </div>
    )
    }

}

I wonder why this.state.rows.data is marked as undefined because I added a simple button - when i click this button, the test method gets called and prints out this.state.rows correctly.

What did I do wrong?

Thanks for every help!