I am building a Blog with Next JS, which Fetches Data from a Laravel Rest API, I have done everything fine but when I try to fetch data from Ckeditor field it prints as it is, I have tried multiple Rich Text Markdown Packages within my app but the same problem continues. Output is shown in the Image Above. Kindly tell me What should i do now ??
import React from 'react'
import styles from '../../styles/BlogSingle.module.css'
import Image from 'next/image'
import SidebarBlogs from './SidebarBlogs'
import { BlogsBelow } from './BlogsBelow'
export default function BlogSingle({blog, blogs}) {
return (
<>
<div className='container' id={styles.Container}>
<div className='row'>
<div className='col-xl-8 col-lg-8 col-md-4 col-sm-4'>
<div className='row'>
<h1 className={styles.BlogTitle}>{blog.title}</h1>
</div>
<div className='row'>
<Image src={blog.image.url} width={850} height={500} alt={blog.slug}></Image>
</div>
<div className='row' id={styles.PaddingBelowImage}>
<div className='col-xl-6 col-lg-6 col-md-3 col-sm-3'>
<div id={styles.AuthDet}>
<Image src={blog.created_by.profile.thumbnail} width={70} height={50} alt={blog.created_by.name}></Image>
<div className={styles.AuthTextSec}>
<p className={styles.AuthName}>{blog.created_by.name}</p>
<time dateTime='13-11-2021' className={styles.AuthTime}>{blog.created_at}</time>
</div>
</div>
</div>
<div className='col-xl-6 col-lg-6 col-md-3 col-sm-3'>
<div id={styles.AuthDet}>
<i className='bi bi-bookmark'></i>
<i className='bi bi-link-45deg'></i>
<i className='bi bi-whatsapp'></i>
<i className='bi bi-facebook'></i>
<i className='bi bi-instagram'></i>
<i className='bi bi-twitter'></i>
</div>
</div>
</div>
<div className='row' id={styles.BlogContent}>
{blog.desc}
{/* <CKEditor
editor={ Editor }
config={ editorConfiguration }
data={ blog.desc }
/> */}
</div>
</div>
<div className='col-xl-1 col-lg-1 col-md-1'>
<div className="vl"></div>
</div>
<div className='col-xl-3 col-lg-3 col-md-2 col-sm-2'>
<div className='row'>
<p className={styles.YouLike}>{"You May Also Like"}</p>
</div>
<SidebarBlogs blogs={blogs}></SidebarBlogs>
</div>
</div>
</div>
<div className={styles.HideOnMobile}>
<p>{"Featured Stories"}</p>
</div>
<hr></hr>
<BlogsBelow blogs={blogs}></BlogsBelow>