How to Selecting multiple rows in react js ? (Ctrl + Click)

Question

  const handleKeyDown = (event, ID) => {        
            //up and Down key
        const active = document.activeElement;
        active.addEventListener('keydown', function (event) {
            switch (event.key) {
                case "ArrowUp":
                    active?.previousElementSibling?.focus();
                    event.preventDefault();
                    break;
                case "ArrowDown":
                    active?.nextElementSibling?.focus();
                    event.preventDefault();
                    break;
                default: break;
            }
        });

    }

    const active = (rowNumber) => {
        if (rowNumber === 0) {
            myRef.current.focus();
        }
    }
    const ClickHighlight = (event, ID) => {
        if (event.ctrlKey) {
            console.log(ID);
        }
        

    }

    return (
                <table className="table">
                  <tbody>
                    {comments.map((comment) => {
                        return (
                            <tr key={comment.idx} tabIndex={comment.idx} className="border_bottom" onKeyDown={(e) => handleKeyDown(e, comment.idx)} onLoad={() => active(comment.idx)} ref={comment.idx === 0 ? myRef : null} onMouseDown={(e) => ClickHighlight(e, comment.idx)}>
                                <td style={{ color: "white", width: "200px" }}>
                                    <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
                                </td>
                                <td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>

When we click ctrl and left mouse click it highlight and then select another row to highlight the row. How can i do this to highlight the multiple row in table? is possible to include this part in onKeyDown function

Please help me