Nós vamos exibir os endereços do form aqui dentro do dropdown que temos

Vamos já excluir o “Address” que temos aqui para não dar conflito com a entidade que vamos chamar

Primeiro aqui dentro de addProduct vamos criar um handle que vai puxar os endereços que nós temos salvo

const handleGetAddress = async () => {
  const res = await addressService.getAddress();

  const value = res.data.map((address: Address) => {
    return {
      key: address._id,
      value: `${address.street} Nº${address.number}`,
    };
  });

  setAddress(value);
};

Com isso feito, nós precisamos apenas usar um useEffect chamando esse handle e daremos um console acima para poder visualizar o preenchimento de address

console.log(address);

useEffect(() => {
  handleGetAddress();
}, []);

Agora que temos o endereço, podemos agora colocar no dropdown apenas o nosso state no lugar do antigo address, mas antes vamos trocar o state de string para array, pois nesse nosso caso aqui o state será focado em ser um array de objetos, e não mais apenas o Id

Ao mesmo tempo, devemos criar o nosso addressId

const [addressId, setAddressId] = useState("");
const [address, setAddress] = useState([]);

Agora a gente pode ver aqui na tela que está aparecendo os endereços criados e podemos também selecionar eles caso seja necessário

<DropDownComponent
  data={address}
  placeholder="Selecione o endereço"
  setSelected={setAddressId}
/>