PrimeReact Dropdown doesn't close after change

Question

I am new to react and am completely lost as to why my primereact dropdown will not close. It sets the new value and the current datagrid reacts and repopulates to the new value...... but the dropdown continues to stay in an open state and won't close.

   const numberOfDays = useNumberOfDays();
   const [selectedDays, setSelectedDays] = useSelectedDaysState();

const handleDropDownChange = (event: { value }) => {
    setSelectedDays({ label: event.value, value: event.value });
    refresh();
  };

return (
    <>
      <OrderDetailModal visible={showModal} onHide={handleHideModal} />
      {filteredOrders && (
        <div className="days-select">
          Here is a list of orders available for the past
          <span>
            <Dropdown
              value={selectedDays.value}
              onChange={handleDropDownChange}
              options={numberOfDays}
              optionLabel="label"
              placeholder="Days"
              className="daysdropdown"
            />
          </span>
          days.
        </div>
      )}
      <div>
        <div className="filter-row">
          <div className="filter-row-left">
            <span>
              <i
                className="pi pi-copy copy-icon"
                onClick={copyToClipboardUtil}
              />
            </span>
            <span>
              <i
                className="pi pi-file-excel copy-icon"
                onClick={exportToExcelUtil}
              />
            </span>
            <span>
              <i className="pi pi-print copy-icon" onClick={printDataUtil} />
            </span>
          </div>
          <div className="filter-row-right">
            <div className="p-input-icon-left">
              <i className="pi pi-search" />
              <InputText
                value={globalFilter}
                onChange={(e) => setGlobalFilter(e.target.value)}
                placeholder="Global Search"
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default OrdersPage;

I am managing the values on the dropdown using recoil; This is the state file:

import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { NumberOfDays } from "../types";

export const selectedDays = atom<NumberOfDays>({
  key: "selectedDays",
  default: { label: "30", value: "30" },
});

export const numberOfDaysOptions = atom<{ label: string, value: string }[]>({
  key: 'numberOfDaysOptions',
  default: [
    { label: '3', value: '3' },
    { label: '7', value: '7' },
    { label: '14', value: '14' },
    { label: '30', value: '30' },
    { label: '45', value: '45' },
  ],
});


export const useSelectedDays = () => useRecoilValue(selectedDays);

export const useSelectedDaysState = () => useRecoilState(selectedDays);

export const useNumberOfDays = () => useRecoilValue(numberOfDaysOptions);

export const useNumberOfDaysState = () => useRecoilState(numberOfDaysOptions);

export const useSetSelectedDaysState = () => useSetRecoilState(selectedDays);

I apologize ahead of time if this is a dumb question but I am newer to react and trying to learn and I am at a loss as to why the primereact dropdown is staying open instead of being closed after onChange occurs.