How to Add an Onclick event with React.forwardRef to open a Modal Box

I am an electrical engineer attempting to write a portfolio with JavaScript and Typescript, apologies if my question is trivial.

The following code, created a generalised parent, which creates ‘cards’ of work experience.

The following code works correctly, but I am trying to add an onclick event to the child events. I attempt to add an ‘onclick’ attribute to open a simple modal box with some text, but I am getting errors stating I need :

React.MouseEventHandler<HTMLAnchorElement>

I am wondering if there is a way to add an ‘onclick event’ to these child events? Specifically the “works-card” class? Or how to redeclare this block with a MouseEveentHandler?

I would really appreciate any help!

import React from 'react'
import { Github, Link, works } from '../../../library'
import { Headings } from '../../core/headings/headings'
import './style.css'

const Works = React.forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <div ref={ref} className="works">
      {/*  Display the section title and subtitle */}
      <Headings title="Working" subtitle="Places I've Worked" />
      <div className="projects-grid">
        {works.map((work) => (
          <a
            className="works-card"
            target="_blank"
            key={work.title}
            rel="noreferrer"
            
          >
            <p className="project-name">{work.title}</p>
            <div className="project-language">
              {work.languages.map((language) => (
                <span key={language}>{language}</span>
              ))}
            </div>
          </a>
        ))}
      </div>
    </div>
  )
})



Works.displayName = 'Works'

export { Works }

Thankyou!

I have tried to ad an “onClick” attribute, with errors.