I have a post page in blog model, which includes Detail and Comment Component. getStaticProps from the post page gets the data, and I am passing this data as props to the Detail Component. Yet the the Detail component is not getting rendered.

Here's the post page:

```
import BlogDetail from "../../components/BlogDetail/BlogDetail"
import { CSSTransition } from 'react-transition-group'
import AuthContextProvider from "../../context/AuthContext"
import Cookie from "../../components/Cookie"
import { ThemeContext } from "../../context/ThemeContext"
import { useContext } from "react"
import '@fortawesome/fontawesome-svg-core/styles.css'
import dynamic from 'next/dynamic'
const Navbar = dynamic(() => import("../../components/Navbar"), { ssr: false })
import axios from "axios"
import { baseURL } from "../../functions/baseUrl"

export const getStaticPaths = async () => {
    const res = await axios.get(baseURL + "/post/");
    const info = await res.data
    const paths = info.map(datum => {
        return {
            params: { slug: datum.slug }
        }
    })
    return {
        paths,
        fallback: false
    }
}
export const getStaticProps = async (context) => {
    const slug = context.params.slug;
    const res = await axios.get(baseURL + '/post/' + slug + "/");
    const data = await res.data;

    return {
        props: { datum: data }
    }
}
const Blog = (datum) => {
    const [dark] = useContext(ThemeContext)
    return (
        <div className={`main ${dark}`}>
            <AuthContextProvider>
                <Navbar />
                <CSSTransition
                    in={true}
                    classNames="pagetransitions"
                    timeout={100}
                    key={1}
                    appear={true}
                    unmountOnExit
                >
                    <div>
                        <Cookie />
                        <BlogDetail title={datum.title} datum={datum} />
                    </div>
                </CSSTransition>
            </AuthContextProvider>
        </div>
    )
}
export default Blog;

```

And my BlogDetail model:

```
import React, { useState } from 'react';
import styles from "../../styles/blogDetail.module.css"
import timeformatter from "../../functions/timeFormatter"
import Tags from "../Tags";
import Head from "next/head"
import dynamic from 'next/dynamic'
const Favourite = dynamic(() => import("./Favourite"), { ssr: false })
const Comment = dynamic(() => import("./Comment"), { ssr: false })

function BlogDetail(props) {
  const data = useState(props.datum)

  function createMarkup() {
    return { __html: data.text };
  }
  return (
    <div className={styles.blog_text_container}>
        <div>
          <h1>{data.title}</h1>
          <Tags tag={data.tags} />
          {data.image_head === null ? (
            <span></span>
          ) : (
              <div className={styles.article_detail_image}>
                <img className={styles.blog_header_image_detail} alt={data.alt_image_text} src={data.image_head}></img>
              </div>
            )}
          <br></br>
          <div dangerouslySetInnerHTML={createMarkup()} />
          <br></br>
          <span>{data.comments}</span>
          <br></br>
          <span>Published: {timeformatter(data.created_at)}</span>
          <br></br><br></br>
          <Favourite id={data.id} favcount={data.favcount} /><br></br>
          <Comment id={data.id} /><br></br>
          <br></br>
        </div>
    </div>
  )
}
export default BlogDetail

```

I have tried passing my props individually like the titles, texts. But nodda. I have tried directly rendering the props without including state. Any help would appreciated.