Im trying to get realtime database from firebase using react useState. im a newbie with react especially with hooks. i got error like this Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. . i think this because useState assume onValue give a infinite loop. do i should apply a setTimeOut ? or using another hook ? this my code looks like

import React, { useState } from 'react'
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getDatabase,ref,onValue} from 'firebase/database'
import firebaseConfig from '../config/fbConfig'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries


function SensorCard() {
    const [data,setData] = useState(0);    
    initializeApp(firebaseConfig);
    const db = getDatabase()
    const soilTemp = ref(db, '/sensor/kelembabanTanah')
    onValue(soilTemp, (snapshot) => {
        setData(snapshot.val())
    })
    
  return (
    <>
        <div className='
        border border-green-900 '>
            <div>Temperature</div>
            <div>
                <div>{data}</div>
                <div>C</div>
            </div>

        </div>
    </>
  )
}

export default SensorCard

Thanks