Предотвращение воздействия дебаунда на панели расширения в React

Question

У меня проблема, когда мне нужен отклоненный ввод на панели расширения в ReactJS, однако я сталкиваюсь с проблемой, что при щелчке ввода вся полоса расширения меняет цвет с черного, который я использовал по умолчанию приложение к белому цвету. Я не знаю, что вызывает это и как это предотвратить.

<ExpansionPanel>
      <ExpansionPanelSummary
        expandIcon={<ExpandMoreIcon />}
        aria-label="Expand"
        aria-controls="additional-actions1-content"
        id="additional-actions1-header"
      >
        <FormControlLabel
          aria-label="Acknowledge"
          onClick={event => event.stopPropagation()}
          onFocus={event => event.stopPropagation()}
          control={
            <Checkbox
              checked={rule.enabled}
              onChange={() => Edit({ enabled: !rule.enabled })}
            />
          }
        />
        <DebounceInput
          id="standard-basic"
          value={rule.name}
          onChange={event => {
            Edit({ name: event.target.value });
          }}
          element={TextField}
          debounceTimeout={500}
        />
      </ExpansionPanelSummary>
</ExpansionPanel>

Я пробовал простую стилизацию с color="black" до конца, но это не сработало

Любая помощь приветствуется