Org Selection: Show correct selected org when select is open (#96601)

* Org: select default is incorrect

* optimize

* Update public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* optimize

* optimize

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 import { Icon, Select, useStyles2 } from '@grafana/ui';
@@ -10,12 +10,21 @@ import { OrganizationBaseProps } from './types';
 
 export function OrganizationSelect({ orgs, onSelectChange }: OrganizationBaseProps) {
   const styles = useStyles2(getStyles);
-  const { orgName: name, orgId, orgRole: role } = contextSrv.user;
-  const [value, setValue] = useState<SelectableValue<UserOrg>>(() => ({
-    label: name,
-    value: { role, orgId, name },
-    description: role,
-  }));
+  const { orgId } = contextSrv.user;
+
+  const options = useMemo(
+    () =>
+      orgs.map((org) => ({
+        label: org.name,
+        description: org.role,
+        value: org,
+      })),
+    [orgs]
+  );
+
+  const selectedValue = useMemo(() => options.find((option) => option.value.orgId === orgId), [options, orgId]);
+
+  const [value, setValue] = useState<SelectableValue<UserOrg>>(() => selectedValue);
   const onChange = (option: SelectableValue<UserOrg>) => {
     setValue(option);
     onSelectChange(option);
@@ -28,11 +37,7 @@ export function OrganizationSelect({ orgs, onSelectChange }: OrganizationBasePro
       value={value}
       prefix={<Icon className="prefix-icon" name="building" />}
       className={styles.select}
-      options={orgs.map((org) => ({
-        label: org.name,
-        description: org.role,
-        value: org,
-      }))}
+      options={options}
       onChange={onChange}
     />
   );