I'm trying to add an onClick event to an svg tag where i want it to direct me to another page which is page2.html. I really tried everything but I couldn't find a solution. If there is another way of doing that other than using onClick would be great as well3 Would really appreciate the help. Here is my code:-

import React from "react";
import "./HeaderBox.css";
import "./HeaderBox.scss";
import { Card } from "react-bootstrap";

const HeaderBox = () => {
  return (
    <Card id="Header">
      <button>page</button>
      <div class="HeaderDiv">Omar Fares</div>
      <svg viewBox="45 60 400 320" xmlns="http://www.w3.org/2000/svg">
        <path
          fill="#fff"
          d="M 90 210 C 90 180 90 150 90 150 C 150 150 180 150 180 150 C 180 150 300 150 300 150 C 300 150 330 150 390 150 C 390 150 390 180 390 210 C 390 240 390 270 390 270 C 330 270 300 270 300 270 C 300 270 180 270 180 270 C 180 270 150 270 90 270 C 90 270 90 240 90 210"
          mask="url(#knockout-text)"
        ></path>
        <mask id="knockout-text">
          <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
          <text x="147" y="227" fill="#000">
            Memory
          </text>
        </mask>
        <a onClick="window.location.href='page2.html'"></a>
      </svg>
      
    </Card>
  );
};
export default HeaderBox;