I have a simple ReactStrap Card element that is repeated inside of a react-hook-form.

When I select and or or from the Form.Select element, I want to be able to change the background color of the card header and card body in response. Most examples of dynamic color changes use the react state system to target a specific item or class, but that system doesn’t carry over to dynamically created elements.

//Definition of fieldArray
const { 
  fields: conditionGroups, 
  append: conditionGroupAppend, 
  } = useFieldArray({
  control,
  name: "conditionGroups",
});

//Mapping of fieldArray into a repeating section
{conditionGroups.map((field, index) => (
  <ConditionGroup key={field.id} index={index} vals={conditionValues} />
))}
<Button onClick={() => { conditionGroupAppend({}); }}>+ Condition Group</Button>

//Definition of ConditionGroup
<Card>
  <Card.Header>
    <Form.Select className="form-select flex-grow-1" {...register(`conditionGroups.${index}.comparator`)}>
      <option>Choose one...</option>
      <option value="and">and</option>
      <option value="or">or</option>
    </Form.Select>
  </Card.Header>
  <Card.Body>Left empty for brevity</Card.Body>
</Card>

What do I do here?