no effects

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "markdown-it": "^13.0.2",
+    "markdown-parser-react": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",

src/components/BlogContent.jsx

@@ -1,17 +1,21 @@
 import { useParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 
+
+
 const BlogContent = ({ blogsData }) => {
-
+
+    console.log(blogsData);
     const { id } = useParams();
 
-    let blog ={}
-    if (blog){
+    let blog = {}
+    if (blog) {
         let arr = blogsData.data.filter(blog => blog.id == id)
         blog = arr[0];
+        console.log(blog.attributes.blogContent);
     }
     else {
-        blog={};
+        blog = {};
     }
 
 
@@ -87,15 +91,16 @@ const BlogContent = ({ blogsData }) => {
         <div className="w-full py-16 px-8 relative bg-gray-800">
             <div className='max-w-[1340px] mx-auto pt-24'>
                 <div className="flex flex-col items-center">
-                    <h1 className="md:text-4xl text-2xl text-white font-bold mb-4 p-2">{blog.title}</h1>
+                    <h1 className="md:text-4xl text-2xl text-white font-bold mb-4 p-2">{blog.attributes.blogTitle}</h1>
                     <div className="max-w-full md:max-w-2xl">
                         <img className='w-full h-auto mb-4' src={`http://localhost:1337${blog.attributes.coverImg.data.attributes.url}`} alt={blog.attributes.blogTitle} />
                     </div>
                     <div className="pt-4 lg:px-12 text-white">
-                        <ReactMarkdown>
-                        {blog.attributes.blogContent}
+
+                        <ReactMarkdown className='line-break'>
+                            {blog.attributes.blogContent}
                         </ReactMarkdown>
-                     
+
                         <div className="flex flex-col items-center max-w-[400px] mx-auto py-6 bg-slate-800 rounded-2xl mt-8">
                             <img
                                 className="w-16 h-16 rounded-full mb-2"

src/components/index.js

@@ -1,7 +1,7 @@
 import Navbar from "./Navbar";
 import Blogs from "./Blogs";
 import Footer from "./Footer";
-import BlogContent from "./BlogContent";
+import BlogContent from "./BlogContent.jsx";
 
 export {
     Navbar, 

strapi/src/api/blog/content-types/blog/schema.json

@@ -30,7 +30,7 @@
       "type": "string"
     },
     "blogContent": {
-      "type": "markdown"
+      "type": "richtext"
     },
     "author": {
       "type": "string"