Hey there, I'm trying to use a value from a useContext state and pass it as a value for my CSS class, however it does not get applied when rendered.

export default function Fade() {
    const { top, setTop } = useContext(Context);
    useEffect(() => {
        console.log(top);
    }, [top, setTop])
    return (
        <div id="fade" className={`absolute border-black border-2 h-full bg-white bg-opacity-40 w-full top-[${top}px] z-30`}></div>

    )
}

I know that the value is correctly being called from the Context API because I can print it out, and it comes up when looking at the style using inspect element, however it isn't properly being applied. Any idea how to fix this?