Setting classname element from passed parameter in tailwind css

Question

I have this child component that is rendered when clicked on a link:

const GroupPage = () => {
  const { group, background } = useLocation().state

  return (
    <>
      <div
        className={`flex flex-col pt-10 md:pt-20 px-4 h-36 md:h-72 bg-gradient-to-b from-[${background}] to-black`}>
      </div>
    </>
  )
}

The background variable is basically a color in hex format #27856A, it's passed successfully, however when setting up the from-[hex] to-black in classname, the color isn't shown correctly even though I'm able to see it correctly in Chrome dev tools:

<div class="flex flex-col pt-10 md:pt-20 px-4 h-36 md:h-72 bg-gradient-to-b from-[#1E3264] to-black">
</div>

Any idea what am I doing wrong here?