'How to customize dropdown item in react semantic-ui-react?

I'm using dropdown from semantic-ui-react. I am dynamically creating a dropdown option, and I want to change the background color of the item dynamically. How can I fill the background color to 100%? enter image description here

Campaign

import {
  Dropdown,
  Menu,
} from "semantic-ui-react";
//make customize option
  getCustomerGroupOptions = () => {
    let options = [
      {
        text: "none",
        key: "none",
        value: {},
      },
    ];
   for (let tag of this.props.tags || []) {
      options = [
        ...options,
        {
          text: tag.label,
          key: tag.id,
          value: tag,
          content: (
            <div
              className="item"
              style={{ backgroundColor: tag.color, color: "#fff" }}
            >
              {tag.label}
            </div>
          ),
        },
      ];
    }
}
    

//Dropdown
                  <Dropdown
          error={errors.recipientFlag}
          placeholder={I18n.get(
            `${scope}.normalModal.title3.group.placeholder`
          )}
          className="mb-5 width-75 max-width-350px"
          name="recipient"
          value={campaign.recipient ? campaign.recipient : null}
          selection
          options={groupOptions}
          onChange={onChange}
        />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source