How do I trigger a Dialog from an outside component?

[samuelneff]

I have a list of icons that I want to trigger a single dialog. The dialog is not showing as a dialog at all; it's just putting the content into the page inline with zero styling or dialog behavior.

My layout is like this:

export function BrowseSection() {
  const [ selectedIcon, setSelectedIcon ] = useState('');

  return (
    <div className={styles.browseSection}>

      <BrowseIconList
        onIconClick={setSelectedIcon}
      />

      <Dialog.Root open={Boolean(selectedIcon)}>
        <Dialog.Content>
          <Dialog.Title>{selectedIcon}</Dialog.Title>

          <div className={styles.browseDetailTable}>
            More content here...
          </div>

          <Dialog.Close>
            <Button onClick={onCloseDialog}>
              Done
            </Button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  );
}

In the actual app these components are further apart from each other in the component hierarchy.

The icon list has over 10,000 items in it when unfiltered.