I can't render codes as a paragraph in React

Hey, I need your help. Here is the code:
const VideoExample = () => {
const VideoCode = function Video({ video }) {
return (

{video.title}

{video.description}

);

}`

return (
    <div className="bg-[#1A1D23] min-h-xl flex flex-col justify-center items-center text-center py-32">
        <h2 className="text-5xl">Create user interfaces <br /> from components</h2>
        <div className="text-xl mt-10">
            <p>
                React lets you build user interfaces out of individual pieces called components.
            </p>
            <p>
                Create your own React components like <span className="bg-[#404756] rounded-md p-1">Thumbnail</span>, <span className="bg-[#404756] rounded-md p-1">LikeButton</span>, and <span className="bg-[#404756] rounded-md p-1">Video</span>.
            </p>
            <p>
                Then combine them into entire screens, pages, and apps.
            </p>
        </div>
        <div>
            <div className="max-w-xl">
                <div className="bg-[#23272F] w-full rounded-t-xl flex justify-baseline pl-4 py-3">
                    <p className="text-sm text-gray-400">Video.js</p>
                </div>
                <div className="bg-[#16181D]">
                    <p>
                        <code>
                            {VideoCode}
                        </code>                        
                    </p>
                </div>
            </div>
        </div>
    </div>
)

}

export default VideoExample`

And result: