I am unable to show data in my NextJS app using Sanity - reactjs

Question

Though the data is showing in the console but I am missing something. I am new to NextJS and Sanity.io. So Kindly help. Nextjs code is not showing data in the frontend.
This is the NextJs code:
import React from "react";
// import Layout from '../components/Layout';
import client from '../utils/client';
export const TermsAndPolicy = (props) => {
return (
<>
<div className="ease-in">
<div>
<h1 className="text-3xl font-medium text-center my-4">Terms and Conditions</h1>
<h4 className="text-xl mx-8 py-8 ">
<span>Last Updated:{props.terms.dateUpdated}</span>
</h4>
</div>
<div>
<div>
<h2>{props.title}</h2>
</div>
<p className="md:text-justify text-center mx-8 py-8">
{props.body}
</p>
</div>
</div>
</>
);
};
export default TermsAndPolicy;
export const getServerSideProps = async () => {
const query = `*[_type == "terms"]{
title,
subHeading,
dateUpdated,
url,
body
}`;
const terms = await client.fetch(query)
console.log(terms);
return {
props: {
terms
}
};
}
I have added the NextJs code above which shows that I have called the client and connected the app. But somehow I am unable to show the data from the backend into the frontend. Data in the console is showing as you can see below! So therefore it is connected properly. The data below is the data showing in console:
But data is not showing in the website. It is showing blank instead.