I want to pass text as an argument to a function through a Component in React, but whenever I do, it Stops Working

I have two components and I want to input text from one component to be rendered in another. so far I have this:

First Component: displays blog posts

import { Post } from './Post'

function Blog()  {
  return (
    <section>
      <div className='posts'>
          <Post title='Title'/>
      </div>
    </section>
  )
}

export default Blog

Second Component: where the posts are written

import Image from '../assets/NightSky.jpg'
import '../styles/Post.css'

export const Post = (title) => {
  return (
    <div className='post'>
        <img className='postImg' src={Image} alt="smt"/>    
        <div className='postInfo'>
            <div className='postSpace'>
                <span className='postText1'>Veniam non pariatur aliqua aliqua sunt.</span><br/>
                <span className='postText2'>Aliqua sunt cillum incididunt nisi.</span>
            </div>
            <p className='postTitle'>{title}</p>
            <hr/>
            <span className='postDate'>20h08</span>
        </div>
    </div>
  )
}

When I write everything manually without using {title}, It works fine and I get my desired result: Desired Result

However, whenever I use the {title} way, everything just disappears and I'm left with a blank background. There are no problems with the paths or any missing imports, just the {title} problem.

The VSCode console throws no issues or errors, but the Chrome Console throws this: Chrome Console Error Messages

Can anyone help me, please? Also, I am new to this sort of stuff with very limited knowledge so I'd appreciate a simple answer where possible tbh.

Thank you!