How to use svelte directives on components using svelte runes?

I have this svelte component that is currently using the use: directive from svelte runes:

<script>    import {route} from "@mateothegreat/svelte5-router";    let {children, className, ...rest} = $props();</script><a        use:route        class={`btn ${className}`}        {...rest}>    {@render children()}</a>

When trying to pass it as a prop I get a render error: "Svelte: This type of directive is not valid on components". Here is how I'm trying to use the directive as a prop:

<ButtonLink       onclick={() => $currentRoute = window.location.pathname}       href={href}       class:active={isActive}>

The class:active={isActive} is throwing the error. Is there a way to pass the use of directives to a component in svelte runes? If so how and what am I doing wrong?