how to stay highlighted in table row?

Question

Code:-

 const ClickHighlight = (event, id) => {
        var StoreId = [];
        if (event.type === 'click') {
            //console.log(id);
            if (event.ctrlKey) {
                // add to highlighted
                setHighlightedRows((current) => {
                    console.log("current", current)
                    if (current.includes(id)) {
                        // row is already highlighted. Unhighlight but keep the others                   
                        return current.filter((entry) => entry !== id);

                    }
                    else {
                        StoreId.push(...current, id)
                        // add row to the current list of highlighted ones  
                        console.log("nn", ...current, id);
                        return [...current, id];
                    }
                });
            }
            
            else {
                // highlight clicked row and de-highlight others
                setHighlightedRows([id]);
            }
            const active = document.activeElement;
            active.addEventListener('keydown', function (event) {
                event.preventDefault();
                if (event.ctrlKey) {
                    console.log("ss", StoreId);
                    setHighlightedRows([...StoreId]);
                }
            });
        }

    }

table row:-

   <tr key={playdata.idx} tabIndex={playdata.idx} className="border_bottom"
                                        onKeyDown={(e) => handleKeyDown(e, playdata.idx)} onLoad={() => active(playdata.idx)}
                                        ref={playdata.idx === 0 ? myRef : null}
                                        onClick={(e) => ClickHighlight(e, playdata.idx)}
                                        style={isHighlighted ? { backgroundColor: '#254368' } : {}}
                                    >
                                     <td style={{ color: "white", width: "250px" }}>

                                        <select id="SelectFocus" value={playdata.ChannelName} tabIndex={-1}
                                            className="btn_primary" onChange={e => setPlayer(e.target.value, playdata.idx)} >
                                            {/* <option value="select">{playdata.ChannelName}</option> */}
                                            {Channelname.map((val, id) => {
                                                // setCHANNEL = val;                                            
                                                //console.log("val", val,id)
                                                return (

                                                    <Fragment key={id}>
                                                        {removeRedundant([...val, playdata.ChannelName]).map((val1) => {
                                                            //console.log(val1,index1);
                                                            return <option value={val1} key={val1}>{val1}</option>;
                                                        })}
                                                    </Fragment>
                                                )
                                            })
                                            }

                                        </select>
                                    </td>

when I select the multiple rows using the ctrl + click its highlighted the row but when I click the select tag inside the table row the 1 ctrl+click row is not highlighted. How can I do when user ctrl + click it select the 2 row and 2-row highlights and when user click the inside table row select tag then highlight not gone