diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 94775172c4..a425ee84b9 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -116,10 +116,7 @@ const VoiceParamConfig = ({
                 {languages.map((item: Item) => (
                   <ListboxOption
                     key={item.value}
-                    className={({ active }) =>
-                      `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                      }`
-                    }
+                    className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 data-[active]:bg-gray-100'
                     value={item}
                     disabled={false}
                   >
@@ -183,10 +180,7 @@ const VoiceParamConfig = ({
                   {voiceItems?.map((item: Item) => (
                     <ListboxOption
                       key={item.value}
-                      className={({ active }) =>
-                        `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                        }`
-                      }
+                      className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 data-[active]:bg-gray-100'
                       value={item}
                       disabled={false}
                     >