bg-[url()] with dynamic address works strange

[Aleksandr-Pod]

I have a Vite React Typescript project and there is a onBoardingPage.

// state...
  const [onBoardingPage, setOnBoardingPage] = useState<number>(1);
  
  // background image...

    <div className={
      `onboarding__container
      bg-[url('img/images/onboarding_step_${onBoardingPage}.png')]
      bg-no-repeat`
    }>

and I have 4 pages with 4 different png but no one is visible in browser.
If I write without variable - just 
`bg-[url('img/images/onboarding_step_1.png')]`
It will appear
If I turn back to variable this one will be OK, but not others.
If I will write other ones ( ..step_2, ..step_3) and run the app and after that roll it back to variable ${onBoardingPage}
it will work fine !!!

Why is it so ?
Here is the link to my video - https://drive.google.com/file/d/1ULuKVBdLGV5nH8JuVRsqzYbI_rN_56qI/view?usp=sharing

[wongjn]

Class name strings need to appear in full, with no string concatenation/interpolation, see the documentation. Instead, consider applying the background-image property via the style attribute.