react get data and render it in a modal

I'm trying to get data of a table to modal, I got a table and all data are populated just fine, I got a button next to each row where I will like that when I click the button I display all data from the selected row. I got to manage to get the data with console.log, but I cannot get it to render in the modal. I got no errors but still it doesn't show either. I've attached an image with what i got. as you in the console. I get the select row

customsite.jsx

 import React, { useState } from 'react';
 import Modal from './reusable/modal';
 import useFetchData from './hooks/useFetchData';

  const Customsite = ()=> {

const {
    data,
    loading,
  } = useFetchData();

 
const [display, openModal] = useState(false);
   
 const closeModal = () =>{
    openModal(false);
}


const openedModal = () =>{
  openModal(true);
}

   
const getAllData = (data) =>{

      console.log(data);
      return data;
 


     }
return(


    <div>
      
 <div className='conatiner'>

     <table className="table">
  <thead>
   <tr>
  <th>id</th>
  <th>titel</th>
  <th>body</th>
  <th>actions</th>
  <th>details</th>
</tr>
   </thead>
<tbody>
      {data.map(posts =>(

  <tr key={posts.id}>
  <th>{posts.id}</th>
  <th>{posts.title}</th>
  <th>{posts.body}</th>
  <th><button className="btn btn-primary"
   onClick={()=> { getAllData(posts); openedModal();}}>
  
  button</button>   
     
  </th>
  <th>  
    <button 
  
      className="btn btn-success">Success</button>
     </th>
    </tr>
      ))}
           </tbody>
        </table>

          <Modal isOpened={display}
            closeModal ={closeModal}  > 
         
               <h1>modal header</h1>
               <p>{getAllData}</p>
               </Modal>
                  </div>

               </div>
       )
         }

        export default Customsite

make a state for data

   const [tableData, setTableData] = useState({})

after fetching data :

  const getAllData = (data) =>{
  setTableData(data)
  console.log(data);
 }

then on Modal:

       <Modal isOpened={display}
         closeModal ={closeModal}  > 
         <h1>{tableData.title}</h1>
         <p>{tableData.body}</p>
        </Modal>