Реагируйте на добавление пользовательских реквизитов к ванильным элементам html

e.target это select, а не option. А так как у select нет id, вы ничего не получаете. Один из способов добиться того, чего вы хотите, это сделать так:

export default function App() {
  const handleChangeEvent = (e) => {
    const selectedOption = e.target.querySelector(`option[value='${e.target.value}']`);
    console.info(selectedOption.id);
  };
  return (
    <select onChange = {(e) => handleChangeEvent(e)}>
      <option value = "1-10" id = "foo">
        1-10
      </option>
      <option value = "1-11" id = "bar">
        1-11
      </option>
    </select>
  );
}

Вот еще один способ сделать это

import React from 'react';

const handleChangeEvent = (e) => {
  const index = e.target.selectedIndex;
  const el = e.target.childNodes[index]
  const option =  el.getAttribute('id'); 
  console.info(option)
};

export function App(props) {
  return (
    <div className='App'>
      <select onChange = {(e) => handleChangeEvent(e)}>
        <option value = "1-10" id = "foo">
          1-10
        </option>
        <option value = "2-10" id = "zoo">
          2-10
        </option>
      </select>
    </div>
  );
}

Один из самых простых способов добиться этого заключается в следующем:

const handleChangeEvent = (e) => {
    const index = e.target.selectedIndex;
    const id = e.target.childNodes[index].id;
    console.info(id); // logs 'foo' or 'bar' depending on selection
  };

  return (
    <div>
      <select onChange = {(e) => handleChangeEvent(e)}>
        <option value = "1-10" id = "foo">
          1-10
        </option>
        <option value = "11-20" id = "bar">
          11-20
        </option>
      </select>
    </div>
  );