How do i use a conditional statement to style a react anchorlink tag

i am trying to style my anchorlink tags for navigation using a conditional statement while also adding the hover and transition effect, it seems i am not getting the syntax right.

i want to apply the styling effect if the selected page matches the id of the navlink which will be in lower case, here is a snippet of what it looks like below

interface Props  {
    page: string;
    selectedPage: string;
    setSelectedPage: (value:string) => void;
}

function Link({page,selectedPage,setSelectedPage}: Props) {
    const lowerCasePage = page.toLowerCase().replace(/ /g, "")
  return (
    <AnchorLink
    className={'${selectedPage === lowerCasePage ? "text-primary-500" : ""}
    transition duration-500 hover:text-primary-300
    '}
    href={'#${lowerCasePage}'}
    onClick={}
    >
        {page}
    </AnchorLink>
  )
}

export default Link