Unable to provide context to children

type DropdownCtx = {
  rootElement: Accessor<HTMLDivElement>;
  setValue: Setter<any>;
  setSelected: Setter<HTMLElement | undefined>;
};

const DropdownContext = createContext<DropdownCtx>();

export const DropdownComponent = <T extends any>(props: DropdownProps<T>) => {
  let rootElement!: HTMLDivElement;
  const rootElementAccessor = () => rootElement;

  const children = solidChildren(() => props.children); // I import solid's children fn as solidChildren

  const [value, setValue] = createSignal(props.value);
  const [selected, setSelected] = createSignal<HTMLElement | undefined>(undefined);

  // ...

  const context: DropdownCtx = {
    rootElement: rootElementAccessor,
    setValue,
    setSelected,
  };

  // ...

  return (
    // ...
    <dialog
      class='dropdown__popup'
      id={idPopup()}
      open={isOpen()}
    >
      <DropdownContext.Provider value={context}>
        {children()}
      </DropdownContext.Provider>
    </dialog>
  );
};


export const DropdownItemComponent = <T extends any>(props: DropdownItemProps<T>) => {
  // ...

  const context = useContext(DropdownContext);

  if (!context) {
    throw new Error("Missing context");
  }

  // ...
};

// Usage

<DropdownComponent>
  <DropdownItemComponent>
    <span>help :(</span>
  </DropdownItemComponent>
</DropdownComponent>