Реагировать на изменение значений выбранного элемента массива

Question

В моем компоненте React у меня есть массив, который будет отображать связанные значки социальных сетей:

icons: { [
     { iconName: 'twitter', url: '#'},
     { iconName: 'facebook', url: '#'},
     { iconName: 'instagram', url: '#'},
] },

В рендере я показываю все ссылки на социальные иконки из массива:

icons.map( ( icon, index ) => (
  <a key={ index }
    href='#'
    onClick={() => {
       setAttributes({ iconClicked: index });
    }}
  >                   
        <Icon icon={ icon.iconName } /> /* this just renders an svg icon */
  </a>
) ) 

Когда я нажимаю на значок социальной сети, я хочу иметь возможность заполнять форму именем значка и URL-адресом и иметь возможность изменять значения.

Для этого я в первую очередь itemClicked на указатель иконки, на которую я нажал (используя onClick видно выше).

Замечания: itemClicked так же хорошо как icons массив - это переменные состояния, которые обновляются при изменении.

Далее я пытаюсь отобразить имя значка в списке выбора и URL-адрес в текстовом вводе:

<SelectControl
  label="Icon Name"
  value={ icons[iconClicked].iconName }
  options={ [
      { label: __( 'Twitter' ), value: 'twitter' },
      { label: __( 'Facebook' ), value: 'facebook' },
      { label: __( 'Instagram' ), value: 'instagram' },
      { label: __( 'YouTube' ), value: 'youtube' },
  ] }
  onChange={( value ) => {
     const newIcon = icons[iconClicked].iconName;
     setAttributes({ newIcon: value });
  }}
/>

<TextControl
  label={ __( 'Enter URL' ) }
  value={ icons[iconClicked].url }
  onChange={( value ) => {
     const newUrl = icons[iconClicked].url;
     setAttributes({ newUrl: value });
  }}
/>

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

Как я могу сделать эту работу?