How multiple Row Selection in react js?(ctrl +click) and (shift +click)

Question

Code-:

const ClickHighlight = (event, id) => {
        if (event.ctrlKey) {
            // add to highlighted
            setHighlightedRows((current) => {
                if (current.includes(id)) {
                    // row is already highlighted. Unhighlight but keep the others                   
                    return current.filter((entry) => entry !== id);

                } else {
                    // add row to the current list of highlighted ones  
                    console.log("nn", ...current, id);
                    return [...current, id];
                }
            });

        } else if (event.shiftKey) {
            event.preventDefault();
            previousRow = id;
            // add to highlighted
            setHighlightedRows((current) => {
                if (current.includes(id)) {
                    // row is already highlighted. Unhighlight but keep the others  
                    // console.log("shift", current);
                    return current.filter((entry) => entry !== id);

                }
                else {
                    // add row to the current list of highlighted ones  
                    console.log("else", id);
                    console.log("elsecurrent", current);
                    return [...current, id];
                   
                }

            });
        }
        else {
            // highlight clicked row and de-highlight others
            setHighlightedRows([id]);
        }
    }

table:-

 <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)}
                                style={isHighlighted ? { backgroundColor: '#254368' } : {}}>
                                <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>

please help I want when users click the shift + mouse click than 1 row and 2 last rows. All rows selected btw them with the index number number please help...

If user press shift + left click from 1 row to 2 last row then all row btw one and 2 last became selected/focused right now only ctrl + mouse click is working so how can i do the shift + click in react js