Merge pull request #23781 from joaonunomota/expand-refs

UI: Expand sidebar for selected story when using composition

code/ui/manager/src/components/sidebar/Refs.tsx

@@ -1,5 +1,5 @@
 import type { FC, MutableRefObject } from 'react';
-import React, { useMemo, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import type { State } from '@storybook/manager-api';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
@@ -131,6 +131,12 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
   const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
   const [isExpanded, setExpanded] = useState<boolean>(expanded);
 
+  useEffect(() => {
+    if (index && selectedStoryId && index[selectedStoryId]) {
+      setExpanded(true);
+    }
+  }, [setExpanded, index, selectedStoryId]);
+
   const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
 
   const setHighlightedItemId = useCallback(