Unable to reflect the selected values from dropdown inside a heading or a table

Whenever I am choosing a value from the dropdown so that it at least can get reflected in the heading, it is showing, devices.map is not a function. devices is an array where the data from the API got fetched. Below is the code:

import React, { useState, useEffect, useMemo } from "react";

const Devdropdown = () => {
  const [devices, setDevices] = useState([]);
  const url = "..";

  useEffect(() => {
    async function getDevices() {
      const response = await fetch(url);
      const body = await response.json();
      setDevices(body.data);
    }
    getDevices();
  }, []);

  const handleChange = (e) => {
    e.preventDefault();
    setDevices(e.target.value);
  };

  const uniqueDeviceIds = useMemo(
    () => Array.from(new Set(devices.map((device) => device.device_id))),
    [devices]
  );

  console.log(uniqueDeviceIds);
  return (
    <div>
      <h1>Aircraft {}</h1>
      <select
        value={uniqueDeviceIds}
        onChange={handleChange}
        placeholder="select an option"
      >
        {devices
          ? uniqueDeviceIds.map((deviceId) => (
              <option key={deviceId}>{deviceId}</option>
            ))
          : null}
      </select>
    </div>
  );
};

export default Devdropdown;

So, in the Aircraft {} line, what should go inside the curly braces? uniqueDeviceIds or devices?
And when I am having the onChange inside select, whenever I am going to select the element, it is showing, device.map is not a function.