I have list of area to highlight with

{
width,
height,
left,
top
}

const RenderDocxHighlights = () => {
    return (
      <div>
        {(highlightAreas as HighlightAreaExtented[]).map((area, idx) => {
          const top = area.top * scale;
          const left = area.left * scale;
          const width = area.width * scale;
          const height = area.height * scale;
          return (
            <div
              key={idx}
              className="highlight-area-docx"
              style={{
                border: '4px solid #0CC96E',
                background: '#E3F8EA',
                opacity: 0.3,
                top: `${top}px`,
                left: `${left}px`,
                width: `${width}px`,
                height: `${height}px`,
                position: 'absolute',
              }}
            />
          );
        })}
      </div>
    );
  };
<>
 

 
 <DocViewer
                prefetchMethod="GET"
                documents={[
                  {
                    uri: `${document?.url}`,
                  },
                ]}
                pluginRenderers={DocViewerRenderers}
                config={{ header: { disableHeader: true } }}
              />
              <RenderDocxHighlights />
              
            </>

Now i want to highlight these area on the docx on button click, i’m able to put a absolute div there but on scroll also the div scroll. How can i fix it or do in better way?