Read data from firebase with React Hooks into array

I am tring to read from firebase a date that should be placed in an array. A calendar has been implemented and it retrieves the data from the array. The layout of the array looks like const events. However, this data is static and I want to change that by extracting the data from firebase.

The moment the page is loaded, the database will be read out by using useEffect, if I then console.log(state); I get to see the value of firebase with a few seconds of delay. However, when I try to add it to the state by means of React hooks, it continues to execute the useEffect() function (see image from console.log). At the moment there is only 1 object in firebase, but of course there will be more.

Actually the moment the page is loaded the events should be read in from firebase. These can be found in firebase under / events, then these events must be added to the eventDb array that will be reloaded later in <Calendar events = {eventDb}.

Is it possible to realize this? and what am I doing wrong which keeps it using the useEffect function?

I am discovering React and this is one of the things I would like to learn.

The code:

import React , {useEffect} from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";

import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";

import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
import moment from 'moment';
import Firebase from 'firebase';

const localizer = momentLocalizer(moment);

function rand() {
  return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
  const top = 50 + rand();
  const left = 50 + rand();

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const events = [
    {
      id: 0,
      title: 'Board meeting',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 1,
    },
    {
      id: 1,
      title: 'MS training',
      desc: 'this is a test',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 2,
    },
    {
      id: 1,
      title: 'MS training',

      start: new Date(2020, 1, 10, 9, 10, 0),
      end: new Date(2020, 1, 10, 9, 25, 0),
      resourceId: 2,
    },
    {
      id: 2,
      title: 'Team lead meeting',
      start: new Date(2018, 0, 29, 8, 30, 0),
      end: new Date(2018, 0, 29, 12, 30, 0),
      resourceId: 3,
    },
    {
      id: 11,
      title: 'Birthday Party',
      start: new Date(2018, 0, 30, 7, 0, 0),
      end: new Date(2018, 0, 30, 10, 30, 0),
      resourceId: 4,
    },
  ]

export default function CalendarDesk() {
    const [eventDb, setEventDb] = useState([]);

    useEffect(() => {
        let ref = Firebase.database().ref('/events');
        ref.on('value' , snapshot => {
            var state = snapshot.val();
            setEventDb([...eventDb,{
                title: state.title,id: state.id,resourceId: state.resourceId,start: state.start,end: state.end
            }]);
        });

    } );
console.log(eventDb);

  const service = [{
        id: 1,
        name: 'Knippen',
        price: 11.53,
        time: 10.00,
        amount: 1
    },
    {
        id: 2,
        name: 'Scheren',
        price: 10.82,
        time: 10.00,
        amount: 1
    },
    {
        id: 3,
        name: 'Wassen',
        price: 12.66,
        time: 10.00,
        amount: 1
  }]

      const resourceMap = [
        { resourceId: 1, resourceTitle: 'Robin Frissen' },
        { resourceId: 2, resourceTitle: 'Raoul Frissen' },
        { resourceId: 3, resourceTitle: 'Joppe Meijers' },
      ]

      let today = new Date();

  return (
    <div>
      <Container>
          <h3>Agenda</h3>
          <Row >
            <Col md={12} >          
                <Calendar
                events={eventDb}
                localizer={localizer}
                defaultView={'day'}
                views ={['day', 'work_week']}
                step={5}
                defaultDate={new Date()}
                min={new Date(today.getFullYear(),today.getMonth(), today.getDate(), 8)}
                max={new Date(today.getFullYear(), today.getMonth(), today.getDate(), 18)}
                resources={resourceMap}
                resourceIdAccessor="resourceId"
                resourceTitleAccessor="resourceTitle"
                />
            </Col>
        </Row>
        </Container>
    </div>
  );
}

The console.log:]