Данные базы данных Firebase выбираются несколько раз в JavaScript

Question

Я использую ReactJs в моем проекте. Я делаю приложение для чата. Я создал 2 компонента, а именно: ChatRoom. js и InputMessage. js для сообщения. ChatRoom. js - это чаты, загруженные из базы данных Firebase Realtime, а InputMessage. js - для обработки сообщения, отображаемого пользователю InputMessage. js работает совершенно нормально, но проблема в ChatRoom. js Я не могу получить данные из базы данных каждый раз, когда данные извлекаются, они извлекаются несколько раз

Это код ChatRoom. js

import React, { useState, useEffect, useContext } from 'react'
import Header from './Header';
import { UserNameContext, RoomNameContext } from '../UserContext'
import background from './chatBackground.jpg';
import InputMessage from './InputMessage';
import { database } from "../firebase";
export default function ChatRoom() {

    const { userName, setUserName } = useContext(UserNameContext);
    const { roomName, setRoomName } = useContext(RoomNameContext);
    const messageContainer = {
        backgroundImage: `url(${background})`,
        backgroundRepeat: 'repeat-y !important',
        backgroundAttachment: 'fixed',
        backgroundPosition: 'center center',
        minHeight: '100vh',
        position: 'absolute',
        paddingTop: '100px',
        paddingBottom: '10vh',
        width: '100%'
    }
    const header = {
        position: 'fixed',
        zIndex: 99,
        width: '100%',
        height: 'auto',
    }

    const [details, setDetails] = useState([]);
    const [id, setId] = useState(0);
    useEffect(() => {
        //setDetails([]);
        var path = '';
        path = path.concat('Messages/', roomName, '/');
        var ref = database.ref(path);
        ref.on('value', data => {
            var items = data.val();
            var keys = Object.keys(items)
            var messageDB = Object.values(items);
            for (var i = 0; i < keys.length - 1; i++) {
                var k = keys[i];
                console.log(items[k].Message);
            }
        });
    });
    return (

        <div>
            <div style={header}>
                <Header />
            </div>

            <div>
                <div style={messageContainer}>
                    {/*
                details.map(detail =>
                    <div className="opponent msg">
                        {detail}
                    </div>)*/
                    }
                    {/*

                    <div className="opponent msg">
                        <span className="by">Deabrnab</span>
                        <p>Hey! how are you please let me know how is it going</p>
                        <span className="time">11:20 am</span>
                    </div>
                    <div className="own msg">
                        <span className="by">Deabrnab</span>
                        <p className="text">euiq gdbhqwdg gdbhqwdg gdbhqwdg gdbhqwdg gdbhqwdg gdbhqwdg gdbhqwdgysey</p>
                        <span className="time">11:20 am</span>
                    </div>

                */
                    }
                </div>
            </div>

            <InputMessage/>
        </div>
    )
}

Это код InputMessage. js

    import React , { useState,useEffect,useContext} from 'react'
import send from './sendMessage.png';
import { Input, Container, Row, Col} from 'reactstrap';
import Image from 'react-bootstrap/Image'
import { database } from "../firebase";
import { UserNameContext, RoomNameContext } from '../UserContext'

export default function InputMessage(prop) {

    var moment = require('moment');
    const { userName, setUserName } = useContext(UserNameContext);
    const { roomName, setRoomName } = useContext(RoomNameContext);

    const design = {
        width: '100%',
        background: 'black',
    }

    const [message,setMessage] = useState('');
    const date= moment().format('YYYYMMDD');
    const time=moment().format('h:mm a')
    const messageToDB = () => {
    const data ={
        Sender : userName,
        Message : message,
        Date:date,
        Time : time
    }
    var path ='';
        path = path.concat('Messages','/',roomName);
        var ref = database.ref(path);
        ref.push(data);

        setMessage('');
}
    return (
        <div style={design}>
            <Container>
                <Row>
                    <div className="msg-textbox">
                        <Col>
                            <Input className="input" type="text" placeholder="Type Message..."
                            value={message} onChange={e => setMessage(e.target.value)} />
                        </Col>
                    </div>
                    <div>
                        <Col>
                            <Image src={send} onClick={() => messageToDB()} className="send"/>
                        </Col>
                    </div>
                </Row>
                <div></div>
            </Container>
        </div>
    )
}

Это та часть, где я читаю данные из базы данных в ChatRoom. js и всякий раз, когда я сохраняю сообщение в массиве, оно сохраняется в массиве как предыдущие данные + текущие извлеченные данные

var path = '';
        path = path.concat('Messages/', roomName, '/');
        var ref = database.ref(path);
        ref.on('value', data => {
            setDetails([]);
            var items = data.val();
            var keys = Object.keys(items)
            var messageDB = Object.values(items);
            for (var i = 0; i < keys.length - 1; i++) {
                var k = keys[i];
                //console.log(items[k].Message);
                details.push(items[k].Message);
            }
            console.log(details);

        });

мой формат данных в базе данных: