I can't get my data out from axios response in react

I want to get my data from api but my data don't want to out from axios response. why it happening because before I use this way and it's ok.

this is my code

import React, { useState, useEffect } from "react";
import { Link, useLocation } from 'react-router-dom';

import axios from 'axios';
// reactstrap components
import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    CardTitle,
    Row,
    Col,
} from "reactstrap";

function Rooms() {
    const [rooms, setRooms] = useState([]);
    let { state } = useLocation();

    var data = []
    useEffect(() => {
        // Update the document title using the browser API
        let config = {
            method: 'get',
            maxBodyLength: Infinity,
            url: 'http://localhost:3003/getAllRoomById?kos_id=' + state.id,
            headers: {
                'x-access-token': localStorage.getItem('token')
            }
        };

        axios.request(config)
            .then((response) => {
                console.log("room",response.data);
                data = response.data
                setRooms(data)
            })
            .catch((error) => {
                console.log(error);
            });
        console.log("room1", rooms)
    }, [rooms]);
    console.log("room2", rooms)
    const listItems = rooms.map((kost) =>
        <Col lg="3" md="6" sm="6">
            <Card className="card-stats">
                <CardBody>
                    <Row>
                        <Col md="4" xs="5">
                            <div className="icon-big text-center icon-warning">
                                <i className="nc-icon nc-shop text-warning" />
                            </div>
                        </Col>
                        <Col md="8" xs="7">
                            <div className="numbers">
                                <p className="card-category">{kost.price}</p>
                                <CardTitle tag="p">{kost.number}</CardTitle>
                                <p />
                            </div>
                        </Col>
                    </Row>
                </CardBody>
                <CardFooter>
                    <hr />
                    <Link to={{ pathname: "/about", state: kost.id }}>
                        <div className="stats">
                            Masuk <i className="fas fa-regular fa-door-open" />
                        </div>
                    </Link>
                </CardFooter>
            </Card>
        </Col>
    );

    return (
        <>
            <div className="content">
                <Row>
                    {listItems}
                </Row>
            </div>
        </>
    );
}

export default Rooms;

as you can see, I can get my data from my room console.log but can't get my data from room1 and room2 console.log. is anyone know why it is happening? thank you for the answer

The issue is with your useEffect(). Everytime rooms changes value, it runs the api call again. This is infinite and is likely timing out from over use. Try running this example in a project with each of the two useEffect settings. The first, you should see one fact, changing only when the component rerenders. The other will be a continuous stream of cat facts.

For the sake of the demonstration, I am adding values to the rooms array instead of just replacing it. You should see how frequently its getting called that way.

on load:

import axios from "axios";
import { useEffect, useState } from "react";

export const CatFacts = () => {
    const [rooms, setRooms] = useState([]);
    var data = []
    useEffect(() => {
        // Update the document title using the browser API
        let config = {
            method: 'get',
            url: 'https://catfact.ninja/fact',
        };

        axios.request(config)
            .then(({data}) => {
                setRooms([data, ...rooms])
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);


    return <div>{rooms.map((room) => {
        return <div>{room.fact}</div>
    })}</div>
}
export default CatFacts;

on room change:

import axios from "axios";
import { useEffect, useState } from "react";

export const CatFacts = () => {
    const [rooms, setRooms] = useState([]);
    var data = []
    useEffect(() => {
        // Update the document title using the browser API
        let config = {
            method: 'get',
            url: 'https://catfact.ninja/fact',
        };

        axios.request(config)
            .then(({data}) => {
                setRooms([data, ...rooms])
            })
            .catch((error) => {
                console.log(error);
            });

    }, [rooms]);


    return <div>{rooms.map((room) => {
        return <div>{room.fact}</div>
    })}</div>
}
export default CatFacts;