[BUG] setActive only works when link components wrapped with <li> tags

[HAOYI99]

Here is my code,
I found out that if I'm not wrap the <Link> component with <li>, I will never get the onSetActive works,
but I'm able to click and scroll to the section I want

const formItemScrollProps: Partial<ReactScrollLinkProps> = {
  containerId: 'form-container',
  duration: 500,
  smooth: true,
  spy: true,
  onSetActive(to: string, element: HTMLElement) {
      console.log(to)
  }
};

const scrollToItem: Record<PartFormSection, ReactScrollLinkProps> = {
    [PartFormSection.PART]: {
        to: PartFormSection.PART,
        ...formItemScrollProps
    },
    ......
};

import {Element, Link as ScrollTo} from "react-scroll";

<ScrollTo
    className={PartFormSection.PART} {...scrollToItem.PART}><span>{PartFormSection.PART}</span></ScrollTo>
<ScrollTo
    className={PartFormSection.PRINT_JOB} {...scrollToItem.PRINT_JOB}><span>{PartFormSection.PRINT_JOB}</span></ScrollTo>
.........

but this works

<li>
    <ScrollTo className={PartFormSection.PART} {...scrollToItem.PART}><span>{PartFormSection.PART}</span></ScrollTo>
</li>
<li>
    <ScrollTo className={PartFormSection.PRINT_JOB} {...scrollToItem.PRINT_JOB}><span>{PartFormSection.PRINT_JOB}</span></ScrollTo>
</li>

what I want to say is, the document didnt stated about this, I guess this is a BUG
can anyone please explain, thanks

[HAOYI99]

and one more thing, sometimes it works, sometimes not works, the active class will not added even I clicked on the item.