Как динамически изменить цвет фона элемента <select> с помощью React и Tailwind?

Я делаю компонент React.js с Tailwind CSS. Я хочу изменить цвет фона выбранного элемента в зависимости от выбранного параметра. Это то, что я пробовал:

import { useState } from "react";

export function Options() {
  const [selectedColor, setSelectedColor] = useState(""); 

  const handleSelectChange = (e) => {
    setSelectedColor(e.target.value);
  };

  return (
      <select
        className = {`bg-${selectedColor}-200`}
        onChange = {handleSelectChange}
        value = {selectedColor}
      >
        <option value = "">Select a color</option>
        <option value = "red">Red</option>
        <option value = "yellow">Yellow</option>
      </select>
  );
}

Я знаю, что эти классы существуют в Tailwind CSS. Так что же мне не хватает?

Я проверил, не связано ли это с моей конфигурацией попутного ветра, но вроде все в порядке. Я добавил другие стили, и они отображаются.