react-force-graph How to highlight nodes and links as well as show labels using nodeCanvasObjectMode?

I want to highlight nodes and links when hovered over. Node labels should be visible always. I am able to do both at the same time. Here is my code const paintRing1 = useCallback((node, ctx, globalScale) => { // add ring just for highlighted nodes debugger; ctx.beginPath(); ctx.arc(node.x, node.y, NODE_R * 1.1, 0, 2 * Math.PI, false); ctx.fillStyle = node === hoverNode ? 'black' : 'black'; if (hideLabels){ return } const label = ${node.name}; const fontSize = 10 / globalScale; ctx.font = ${fontSize}px MarsCentra-Book; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillStyle = 'ghostwhite'; //node.color; ctx.fillText(label, node.x, node.y + 15); node.opacity = 0.4

}, [hoverNode,highlightLinks]);

<ForceGraph2D ref={fgRef} graphData={data} nodeRelSize={NODE_R} nodeVal={d => { if (d.type === 'KPI') return 3 else if (d.type === 'baseAsset') return 5 else if (d.type === 'Composite') return 5 else if (d.type === 'Project') return 7 else if (d.type === 'source') return 2 else if (d.type === 'market') return 1 }} // nodeLabel={d => d.name} onNodeClick={handleClick} onBackgroundClick={backgroundClick} backgroundColor={"black"} // dagMode={"zout"} // dagLevelDistance={150} linkWidth={link => highlightLinks.has(link) ? 2 : 2} linkCurvature={0.2} linkCurveRotation={Math.PI * 1 / 3} linkDirectionalParticles={3} linkDirectionalParticleColor={"black"} linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}

    linkDirectionalArrowLength={4}
    linkDirectionalArrowRelPos={1}
    nodeOpacity={1}
    nodeColor={d => {
      if (d.type === 'KPI') return '#fdcb6e'
      else if (d.type === 'baseAsset') return 'rgb(97, 142, 210)'
      else if (d.type === 'Composite') return "#00b894"
      else if (d.type === 'Project') return "rgb(200, 120, 137)"
      else if (d.type === 'source') return "#800b0b"
      else if (d.type === 'market') return "#cd3988"


    }}
    linkAutoColorBy={"White"}
    onNodeDragEnd={node => {
      node.fx = node.x;
      node.fy = node.y;
      node.fz = node.z;
    }}
    cooldownTicks={100}
    nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
    nodeCanvasObject={paintRing1}
    onNodeHover={handleNodeHover}
    onLinkHover={handleLinkHover}
    linkLabel={d => d.relation}
    dagMode = {null}
    cooldownTime={15000}
 

  />

I am not sure, how can write after and before at the same time. Please help