I am trying to alert a button in react-markdown.

This is the code below:

import React, {useState, useEffect} from "react";
import {useNavigate} from "react-router-dom";
import '../App.css';
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm'
import rehypeRaw from "rehype-raw"



function App() {

  const navigate=useNavigate()

  const handleClick=(e)=>{
    alert("Hello")
    e.preventDefault()
  }
  
    
  const source = `

  # Plugin

  <button onClick=${handleClick}> Click Me </button>
  
  `

  return (
    <div className="App">
      
      <ReactMarkdown children={source} rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} />
        
    </div>
  );
}


export default App 

After visiting the url I am getting either like this:

<button onClick=e => { alert("Hello"); e.preventDefault(); }> Click Me
 

or alert button keeps popping.

someone please help.