React is not rendering data from another component

Question

I have created below code under button . It is inside table body .

                              <button className="btn btn-sm btn-outline-secondary" onClick={()=>popUp()} > 
                                        
                                        {flag &&  (   
                                                <div >
                                                   <table className="table table-responsive"   <tr><td className="bg-primary">Certificate No</td><td className="bg-success">{certificate.certificateNo}</td></tr>
                                                       <tr><td className="bg-primary">Sponsor</td><td className="bg-success">{certificate.sponser}</td></tr>
                                                       <tr><td className="bg-primary">Protocol No</td><td  className="bg-success">{certificate.protoColNo}</td></tr>
                                                       <tr><td className="bg-primary">Start Date</td><td  className="bg-success">{certificate.startDate}</td></tr>
                                                       <tr><td className="bg-primary">End Date</td><td  className="bg-success">{certificate.endDate}</td></tr>
                                                       <tr><td className="bg-primary">No Of Subjects</td><td  className="bg-success">{certificate.noOfSubjects}</td></tr>
                                                       <tr><td className="bg-primary">Country</td><td  className="bg-success">{certificate.country}</td></tr>
                                                       <tr><td className="bg-primary">Request Status</td><td className="bg-success">{certificate.requestStatus}</td></tr>
                                                       
                                                   </table>
                                                </div>   
                                                </div>
                                                </div>
                                            )}
                                            <i className="bi bi-search">
                                                 
                                            </i>
                                        </button>

the above data is part of table in a particular component.

Now when I tried to write the same code in another component it is printing only static data but it is not rendering result.

import React from 'react'

const TablePopup = (certificate:any) => {
    return (
        <div className="popup-box">
        <div className=" container box">
        <span className="close-icon" >x</span>    
        <div >
           <table className="table table-responsive" >

               <tr><td className="bg-primary">Certificate No</td><td className="bg-success">{certificate.certificateNo}</td></tr>
               <tr><td className="bg-primary">Sponsor</td><td className="bg-success">{certificate.sponser}</td></tr>
               <tr><td className="bg-primary">Protocol No</td><td  className="bg-success">{certificate.protoColNo}</td></tr>
               <tr><td className="bg-primary">Start Date</td><td  className="bg-success">{certificate.startDate}</td></tr>
               <tr><td className="bg-primary">End Date</td><td  className="bg-success">{certificate.endDate}</td></tr>
               <tr><td className="bg-primary">No Of Subjects</td><td  className="bg-success">{certificate.noOfSubjects}</td></tr>
               <tr><td className="bg-primary">Country</td><td  className="bg-success">{certificate.country}</td></tr>
               <tr><td className="bg-primary">Request Status</td><td className="bg-success">{certificate.requestStatus}</td></tr>
               
           </table>
        </div>   
        </div>
        </div>
    )
}

export default TablePopup

and I called this App by writing

  <TablePopup certificate={certificate}/>

certificate is array variable. response.map((certificate: Certificate,index:number) => {

Answer 1

According to me the certificate props should be destructured in TablePopup component like this to use it in component or use props.certifcate

const TablePopup = ({certificate: any}) => {}