fix(v8 PeoplePicker): Fix PeoplePicker wrapped list example's hover styles (#34976)

Author: emmayjiang

packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx

@@ -7,6 +7,7 @@ import {
   ListPeoplePicker,
   ValidationState,
   PeoplePickerItemSuggestion,
+  IPeoplePickerItemSuggestionStyles,
 } from '@fluentui/react/lib/Pickers';
 import { people, mru } from '@fluentui/example-data';
 
@@ -40,6 +41,10 @@ const personaStyles: Partial<IPersonaStyles> = {
   },
 };
 
+const suggestionItemStyles: Partial<IPeoplePickerItemSuggestionStyles> = {
+  subComponentStyles: { persona: personaStyles },
+};
+
 export const PeoplePickerListExample: React.FunctionComponent = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
@@ -125,8 +130,9 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
   const onRenderSuggestionItem = (personaProps: IPersonaProps, suggestionsProps: IBasePickerSuggestionsProps) => {
     return (
       <PeoplePickerItemSuggestion
-        personaProps={{ ...personaProps, styles: personaStyles }}
+        personaProps={personaProps}
         suggestionsProps={suggestionsProps}
+        styles={suggestionItemStyles}
       />
     );
   };