передача завершения события ввода ключа из компонента чипа в компонент вкладки

Question

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

здесь должен появиться серый оттенок

• , не уверенный в том, как передать реквизит из компонента чипа в компонент табуляции.
• текстовое поле с диалогом присутствует в chips-dialog.js
• код div присутствует в tab-demo.js
• весь код css присутствует в card.css
• Можете ли вы, ребята, помочь мне, чтобы в будущем я сам это исправил.
• предоставил фрагмент кода и песочницу ниже.

не работает демо https://codesandbox.io/s/l20n739xqz

tab-demo.js

<ChipsButton
                      className={classes.chipContainer}
                      chipName="button test"

                    />

                    <div className="card" style={{ border: "1px solid red" }}>
                      grey shade should happen here
                    </div>
                    chips-dialog.js
                      handleChangeText(e) {
    //debugger;
    console.log("handleChangeText--->", e);
    this.setState({ value: e.target.value });
  }

chips-dialog.js

  timeout = () => {
    setTimeout(() => {
      this.setState((state, props) => {
        return { cardData: "card data testing testing" };
      });
    }, 2000);
  };

  keyPress(e) {
    // debugger;
    console.log("keyPress--->", e.target.value);

    if (e.keyCode == 13) {
      console.log("value", e.target.value);
      // pass the value from here to the parent component to start applying skeleton css
      this.timeout();

      // put the login here
    }
  }