Tailwind Prose working, but not for var string

I am using tailwind prose which works if I just input the tags into the vs code, but I will be storing the article in the db as a string, reading the string into prose causes it to break and not to present it in html format as intended.

const article = "<h1>The Quantum Information Suppression Program</h1><p>For decades, a clandestine group of powerful individuals, known as the \"Architects,\" have been manipulating the very fabric of reality itself through a covert initiative called the Quantum Information Suppression Program (QISP).</p>";

    return (
        <>
            <Head title="Conspiracy" />
            <PrimaryLayout>
                <div className="w-full h-screen dark:bg-gray-800 dark:text-white">
                    <div className="mx-auto xl:w-2/3">
                        <Navbar />
                    </div>
                    <hr />
                    <div className="flex flex-row justify-center gap-6 mx-auto xl:w-2/3 p-6">
                        <div className="w-2/3">
                            <div className="w-full">
                                <div className="w-full prose prose-slate">
                                    {article}
                                </div>

Here is a test article. Can anyone see why it isn't displaying as intended.

Randy_Johnson

2 years ago

Level 8

<div className="w-full prose prose-slate" dangerouslySetInnerHTML={{__html: article}}></
                                div>

Is this right, I mean it works but it feels so wrong.

Please or to participate in this conversation.