Unable to fetch firebase realtime database data into website using reactjs.

I am unable to fetch data from firebase realtime database version 9 using reactjs , i can view the data in the console , but failing to render it into my website , please help...

below is my code snippet.

import React, {useState, useEffect} from 'react';
import  { db } from '../firebase-config';
import { Link } from 'react-router-dom';
import { ref, onValue } from 'firebase/database';




const ViewAll = () => {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    const posts = ref(db, 'superadmin/admins/')
    onValue(posts,(snapshot) => {
      const json = ({...snapshot.toJSON()})
      const keys = Object.keys(json);
      const postJSON = keys.map(key => {
        const element = json[key];
        return [element.FullName,element.doctors, element.technicians, element.patients]
      });
      setPosts(postJSON);
      console.log({...snapshot.val()})
    })
  }, []);

`
return (

<div style={{marginTop: "100px"}}>
  <table className='styled-table'>
    <thead>
      <tr>
        <th style={{textAlign: "center"}}>No.</th>
        <th style={{textAlign: "center"}}>Name</th>
        <th style={{textAlign: "center"}}>Action</th>
      </tr>
    </thead>
    <tbody>
      {Object.keys(posts).map((id,index)=>{
        return (
          <tr key={id}>
            <th scope='row'>{index + 1}</th>
            <td>{posts[id].name}</td>
            <td>
              <Link to={'/SuperAdmin/ViewAll'}>
              <button className='btn btn-view'>View</button>
              </Link>
            </td>
          </tr>
        );
      })}
    </tbody>
  </table>

</div>

)
}

export default ViewAll
`