По нажитию на кнопки слайдера стили применяются но div не двигается. Если писать в ручную (translate-x-[-300px]) все ок. Но через массив нет. Почему

const [trans, setTrans] = useState([0,300,600,900]);
const [counter, setCounter] = useState(0);

       <div className={`flex relative  w-[280px] h-[400px]`}>
         <div className={`flex transition-all translate-x-[-${trans[1]}px]`}>
          <div className="min-w-[280px] h-[400px] bg-fuchsia-950"></div>
          <div className="min-w-[280px] h-[400px] bg-red-200"></div>
          <div className="min-w-[280px] h-[400px] bg-red-900"></div>
         </div>
        </div>