How to open dropdown options of the top potion instead of bottom

Question

import React, { useState } from "react";
import { MultiSelect } from 'primereact/multiselect';

export default function BasicDemo() {
    const [selectedCities, setSelectedCities] = useState(null);
     const [allCities, setCities] = useState([]);


    const setDAta = () =>{
        const cities = [
            { name: 'New York', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];
        setCities(cities)
    }
    
    return (
        <div className="card flex justify-content-center">
            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={allCities} optionLabel="name" 
                placeholder="Select Cities" maxSelectedLabels={3} onShow={setDAta} className="w-full md:w-20rem" />
        </div>
    );
}
        

how to show dropdown option list top of the dropdown box, instead of bottom, like when i click on dropdown then that option show top

i have try with below way i have set default data and based on that data show loading with in dropdown option. when every data come then that data will display, as of now issue is when user click on dropdown option then that data come so initial data is not available so that issue

import React, { useState } from "react";
import { MultiSelect } from 'primereact/multiselect';

const defaultOption = [
  { name: "1", code: "1", disabled: true },
  { name: "2", code: "2", disabled: true },
  { name: "3", code: "3", disabled: true },
  { name: "4", code: "4", disabled: true },
  { name: "5", code: "5", disabled: true },
  { name: "6", code: "6", disabled: true },
  { name: "7", code: "7", disabled: true },
];

export default function BasicDemo() {
    const [selectedCities, setSelectedCities] = useState(null);
     const [allCities, setCities] = useState([]);
  const itemTemplate = (option) => {
    const listDefault = defaultOption?.map((p) => p.code);
    if (listDefault?.includes(option?.code)) {
      return <Skeleton width="10rem" className="p-2" />;
    }
   
    return <div>{option}</div>;
  };

    const setDAta = () =>{
        const cities = [
            { name: 'New York', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];
        setCities(cities)
    }

    return (
        <div className="card flex justify-content-center">
            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={data ? data : defaultOption} optionLabel="name" 
                placeholder="Select Cities" onShow={setDAta} maxSelectedLabels={3} className="w-full md:w-20rem" />
        </div>
    );
}