Выбор из выпадающего списка

Прошу подсказать, не могу вывести значения во второй выпадающий список, с учетом выбора из первого выпадающего списка

import React from "react";
import { useState } from "react";
const bazis = [      
  "Вкус",
   "Запах",
   "Звук",
    "Осязание",
    "Зрение",
    "Вестибуляр",
    "Физиология",
    "Форма",
    "Сравнение",
    "Модификатор",
    "Расположение",
    "Время",
    "Количество",
]
const obdepr = {
  Вкус: ["съедобное", "несъедобное", "ядовитое"],
  Запах: ["стандартный", "расширенный", "Расширенный+неизвестный"],
  Звук: ["стандартный", "расширенный", "Расширенный+неизвестный"],
   Осязание: ["жидкий", "цельный", "сыпучий"],
   Зрение: ["светлый", "средний", "темный"],
   Вестибуляр: ["влево", "средний", "вправо"],
   Физиология: ["воздух"],
   Форма: ["объемный", "средний", "маленький"],
   Сравнение: ["стандартный", "расширенный", "Расширенный+неизвестный"],
   Модификатор: ["вытянут", "нет", "сплющен по Х, У, Z"],
   Расположение: ["далеко", "средне", "близко"],
   Время: ["вчера", "сегодня", "завтра"],
   Количество: ["много", "один", "определенное кол-во"],
}
function App() {
  const [pole1,setPole1] = useState('')
  const [pole2,setPole2] = useState('')
  return (
    <div className="App">
      <select value={pole1} onChange={e=> setPole1(e.target.value)}>
        <option defaultValue={''}>Выберите Базис</option>
        {bazis.map(pole => <option key={pole} value={pole}>{pole}</option>
        )}
      </select>
      <br/>
      <p>Выбран - {pole1}</p>
      {pole1 && <select value={pole2} onChange={e=> setPole2(e.target.value)}>
      <option defaultValue={''}>Выберите объект/действие/признак</option>
      {obdepr.pole1.map(pole=> <option key={pole} value={pole}>{pole}</option>)}
      </select>
}
    </div>
  );
}

export default App;

Вот этот пункт не работает. pole1 как undefine

{obdepr.pole1.map(pole=> <option key={pole} value={pole}>{pole}</option>)}