I have ResultTable.jsx file.

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Certificate from './models/certificate';
import axios from 'axios';

const ResultTable = ({certificate}) => {
    console.log(JSON.stringify(certificate));
    
     return (
        <tr key={certificate.certificateNo}>
        <td>{certificate.certificateNo}</td>
        <td>{certificate.sponser}</td>
        <td>{certificate.protoColNo}</td>
        <td>{certificate.startDate}</td>
        <td>{certificate.endDate}</td>
        <td>{certificate.noOfSubjects}</td>
        <td>{certificate.country}</td>
        <td>{certificate.requestStatus}</td>
        </tr>
      )
    
   
}

export default ResultTable

It is properly rendering record in the result table. but when I am converting it into .tsx file because my project standards,it is not rendering any record. I also changed the first line and gave type. const ResultTable = (certificate:any) when I printed in .tsx file using console.log it is printing the output.

what minor mistake I am doing? Below is .tsx file

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Certificate from './models/certificate';

    import axios from 'axios';
    
    const ResultTable = (certificate:any) => {

        console.log(JSON.stringify(certificate));
        
         return (
            <tr key={certificate.certificateNo}>
            <td>{certificate.certificateNo}</td>
            <td>{certificate.sponser}</td>
            <td>{certificate.protoColNo}</td>
            <td>{certificate.startDate}</td>
            <td>{certificate.endDate}</td>
            <td>{certificate.noOfSubjects}</td>
            <td>{certificate.country}</td>
            <td>{certificate.requestStatus}</td>
            </tr>
          )
        
       
    }
    
    export default ResultTable