не работают стили при итерации react tailwind

я хотел сделать что-то вроде столбцов с подписями, но он не ставит необходимую мне высоту.

моя ошибка видимо кроется здесь h-[${ day.amount }px], но я абсолютно не понимаю почему в консоли этого свойства абсолютно нет, пытаюсь исправить эту ошибку довольно долго и поэтому буду рад если поможете, если что-то нужно будет ещё я предоставлю.

import React from 'react'
import { IDay } from '../models/IDay'

interface Days {
    days: IDay[]
}


const Content = ( { days } : Days) => {

    // console.log(days)

    return (
        <div className='w-96 h-[400px] rounded-xl bg-white m-auto absolute top-36 left-0 right-0 bottom-0 p-4'>
            <h2 className='mb-10'>Spending - Last 7 days</h2>
            <ul className='flex w-full justify-between items-end'>
                { days.map(day => {
                    return (
                        <li key={ day.amount } className={ ` w-1/7 flex-col justify-center h-[${ day.amount }px]` }>
                            <span className={ `h-full w-full flex bg-red-400 rounded-md hover:bg-blue-400` }></span>
                            <p  className='w-full ml-2'>{ day.day }</p>
                        </li>
                        )
                }) }
            </ul>

            <span className='flex w-full h-[2px] mt-10 bg-pink-100'></span>
            <p></p>
            <h1></h1>
        </div>
    )
}

export default Content