Highlights breaks when multiple words wrapped end up on different lines

[Amnish04]

Describe the bug
I've been using this library on my personal web portfolio for over a year and I find it really cool. However, there's a weird bug someone helped me notice recently, where the notation component highlight overflows its container and hides parts of text it isn't related to.

To Reproduce
Steps to reproduce the behavior:

1. Wrap a couple of words with RoughNotation (almost all types are affects) in a large paragraph, and launch the app in browser.
2. Try adjusting the screen size using dev tools till a point where the wrapped words end up on different lines.
3. You'll notice that the notation still highlights both the words, but spans across the entire width of both lines while hiding all the other text behind it.

Expected behaviour
RoughNotation should only highlight the words that are wrapped and not affect the rest.

Screenshots

Desktop:

• OS: MacOS Sequoia (15.3.1)
• Browser: Chrome

When words on same line:

When on different lines:

Additional context
I've fixed this temporarily in my portfolio by creating a safe wrapper that does not allow annotated words to wrap, but we probably need to fix the root cause.
Amnish04/web-portfolio#18

[Rock-n-Roll-CRC]

There is no need to reinvent the wheel, since there is the "multiline" prop mentioned in the attached README. Not relevant to you, but maybe some will encounter the same problem. 🤔