Когда добавляю в массив данные и вывожу в консоль получаю массив по виду пустой, хотя данные в нем есть

Question

import React from 'react';
import Session from '../Session/Session';
import './MoviePage.css';
import Poster_trailer from '../Poster_trailer/Poster_trailer';
import Description from '../Description/Description';
import Dropdown from '../Dropdown/Dropdown';
import SessionList from '../SessionList/SessionsList';

class MoviePage extends React.Component {

    state = {
        film: '',
        sort: false,
        cinemaChoosen: ' '
    }

    static getDerivedStateFromProps(props) {
        return {
            film: props.state.moviePage.films,
        };
    }


    writeData(array, collection) {
        for (var i = 1; i <= array.length; i++) {
            collection.push(array[i]);
        }
    }

    showSessions = () => {
        this.setState({sort: true});
    }

    updateData = (value) => {
       this.setState({ cinemaChoosen: value })
    }

    getCinemas(list) {
        const url = 'https://ekinoback.herokuapp.com/cinemas';
        fetch(url)
            .then((data) => data.json())
            .then((data) => {
                this.writeData(data, list)
            })
    }

    render() {
        let allCinemas = [];
        this.getCinemas(allCinemas);
        let elemToRender = this.state.film[0];
        console.log(elemToRender);
        console.log(allCinemas);

        return (
            <div>
                <div style={{ marginTop: '40px' }}>
                    <div className="poster-trailer-desription-buttons1">
                        <div className="poster-trailer-desription1">
                            <Poster_trailer 
                                poster_link={elemToRender.poster_link}
                                trailer_link={elemToRender.trailer_link}
                             />
                            <Description elemToRender={elemToRender}/>
                        </div>

                        <div className="Sessions1">Сеанси</div>
                        <div className='dropdown-sortButton'> 
                            <Dropdown cinemas={allCinemas} updateData={this.updateData}/>
                            <button className='sort-button' onClick={this.showSessions}>
                                Знайти сеанси
                            </button>
                        </div>
                        <div>
                            <Session alldata={true} onClick={this.state.sort} />
                            <SessionList film={Object.entries(elemToRender)} cinemaChoosen={this.state.cinemaChoosen}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default MoviePage;

В функции getCinemas через fetch получаю data и отправляю в метод writeData где из него извлекаю объекты и пушу их в массив когда вывожу массив в консоль получаю массив по виду пустой, но если открыть то информация в нем есть(на фото видно), но доступится до нее не могу и размер вывожу и получаю ноль. Пробовал создавать массив в стейте и через setState туда добавлять data но в итоге получал бесконечный цикл, так как при изменнение стейта перерисовывается компонента и опять вызывается setState меняет state и компонента перерисовывается... Вообщем надо как-то в fetch data перенести в какой-нибудь массив чтобы дальше с ним работать