how can i download the picture when i click the button

Question

In some instances it downloads the image but the image does not open

I tried many methods but no good result

when i click the button it will download

import React, {useState, useEffect} from "react";
import { mockComponent } from "react-dom/test-utils";
import '../App.css';
import Tabbar from './Tabbar';
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
 

const HomePage = () => {
     return (
       <div className="slider">
         <div className="myloader">
         {
           loading ? (
           <ClimbingBoxLoader 
           color={'deepskyblue'}
           loading={loading}
           size={30}
           />
           ): (
           <div className="slider"><Tabbar /><div className="load"></div><div className="content btn-shine">
                 <img src="https://cdn.discordapp.com/attachments/935211021285613668/947869684705918976/the-witcher-3-wild-hunt-geralt-of-rivia-vedmak-3-dikaia-ok-1.jpg"/>
                 <a><button className="glow-on-hover">Categories</button></a>

           </div></div>
           )
         }
     </div>
     </div>
     )
 }
 export default HomePage;