Tailwind height transition with react

I'm using react and tailwind for my project. Both of them are latest version. I want make a 500 ms transition when an element's height change like this :

className={`${simpleState ? "h-5" : "h-10"} transition duration-500 ease-in-out`}

I tried any solution , even those are in Stack-overflow. none of them working.

update : I don't want to use hover.

update : solution found. above code is completely correct but you should add this config to tailwind.config.js :

theme: {
    extend: {
      transitionProperty: {
        'height': 'height'
      }
    }
  }