How do I make a dynamic background color change on Twilio Flex's TaskListItem component?

Question

I have to change the background color of Twilio Flex's TaskListItem component depending on how much time the last message's been sent and by whom, but so far I've not been able to make this change dynamically, the color only changes after I refresh the page. I think that I must either use the color as a state using theme as a props, or override the theme using Twilio's methods, but I haven't been able to do neither nor have thought of anything else. Can someone help me out with this one? Thanks.

**COMPONENT'S CODE**
import React, { useState, useEffect } from "react";
import { withTaskContext } from "@twilio/flex-ui";
// import "./index.css";

const TaskItemData = (props) => {
  const [currentTime, setCurrentTime] = useState(Date.parse(new Date()))
  const [mustRespond, setMustRespond] = useState("default")

  useEffect(async () => {
    let conversationSid = props.task.attributes.conversationSid
    let conversation = await
    props.manager.conversationsClient.getConversationBySid(conversationSid)
    let { items } = await conversation.getMessages()

    let message = items.find(e => e.index === conversation.lastMessage.index)

    const green = 1000 * 30
    const yellow = green * 2

    const updateTime = () => {
      setCurrentTime(Date.parse(new Date()))
    }

    setInterval(updateTime, 1000)

    const messageSentTime = Date.parse(message.dateCreated)

    
    if (props.manager.user.identity === message.author) { // it was the attendant who sent the
    last message
      // CHANGE TO DEFAULT COLOR
      setMustRespond("default")
    } else {// it was the customer
      // outside the TIME TO RESPONSE THE CUSTOMER
      if (currentTime - messageSentTime < green) {
        setMustRespond("green")
      } else if (currentTime - messageSentTime < yellow) {
        setMustRespond("yellow")
      } else {
        setMustRespond("red")
      }
    }
    
    console.log(message)
    console.log(props)
    console.log(conversation)  
  }, [props.task]);

  const bgColors = (rgb) => {
    props.theme.TaskList.Item.Container.background = rgb
    props.theme.TaskList.Item.SelectedContainer.background = rgb
  }
  
  if (mustRespond === "default") {
    if (props.theme.isLight === true) {
      bgColors("rgb(244, 244, 246)")
    } else {
      bgColors("rgb(18, 28, 45)")
    }
  } else if (mustRespond === "green") {
    if (props.theme.isLight === true) {
      bgColors("rgb(190, 255, 195, 100)")
    } else {
      bgColors("rgb(6, 92, 0, 100)")
    }
  } else if (mustRespond === "yellow") {
    if (props.theme.isLight === true) {
      bgColors("rgb(254, 255, 143, 100)")
    } else {
      bgColors("rgb(203, 131, 5, 100)")
    }
  } else {
    if (props.theme.isLight === true) {
      bgColors("rgb(250, 153, 153, 100)")
    } else {
      bgColors("rgb(145, 0, 0, 100)")
    }
  }

  return (
    <div className="timeComponentContainerSla">
      <div className="timerSla">
        <h1>{currentTime}</h1>
      </div>
    </div>
  );
};

export default withTaskContext(TaskItemData);

---

**PLUGIN'S CODE**
import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import ShowRating from './components/ShowRating'

const PLUGIN_NAME = 'WaitingTimeSlaPlugin';

export default class WaitingTimeSlaPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    //Show Rating
    flex.TaskListButtons.Content.add(
      <ShowRating key="task-item-data" manager={manager}/>,
      {
        align: "end",
        sortOrder: 1,
        if: (props) => ['assigned'].includes(props.task.taskStatus)
        
    })
  }
}