Добавление тега <textarea> внутрь тега <select> после выбора параметра в React.js

В общем, у меня есть следующий файл JSX, и я хочу иметь обработчик событий, который прослушивает событие, которое генерируется после нажатия "Другой" в разделе производителя. Пожалуйста, найдите указанную опцию в качестве последнего тега <option> внутри тега <select> с названием «цвет» и внутри тега <Fragment>. Кроме того, пожалуйста, игнорируйте уже существующую функцию OnClick; это бесполезно в этой задаче.

Событие, которое я хочу создать, довольно специфично. Он должен добавить текстовую область (или ввод, не совсем уверен), где находится опция «Другое» в раскрывающемся меню, чтобы пользователь мог ввести другой вариант, который он не нашел в текущем выборе цветов. .

Как я смогу этого добиться?

import React, { Fragment} from 'react';
import { StyledSection, StyledSectionColLeft, StyledSectionCol } from '../../../common/theme/cssStyledColumns';
import { Textarea, Select, Input, MandatoryInfo } from '../../../common/form';

const ApplianceDetails = () => (
  <Fragment>
    <h2>Appliance details</h2>
    <MandatoryInfo />
    <StyledSection>
      <StyledSectionColLeft>
        <Select name = "colour" label = "Colour *">
          <option value = "">-Select-</option>
          <option value = "Vokera">Blue</option>
          <option value = "Warmflow">Red</option>
          <option value = "Worcester">Yellow</option>
          <option onClick = {console.info('Click happened')} value = "Other">Other</option>
        </Select>
        <Input name = "model" label = "Model *" />
      </StyledSectionColLeft>
      <StyledSectionCol>
        <Input name = "location" label = "Location *" />
      </StyledSectionCol>
    </StyledSection>
  </Fragment>
);

export default ApplianceDetails;