[Bug]: TagPicker miss place focus when using external TagPickerList

[DanieleDiLucido]

Component

TagPicker

Package version

9.55.0

React version

18.2.0

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 25.99 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @fluentui/keyboard-keys: ^9.0.7 => 9.0.8 
    @fluentui/react-components: ^9.55.0 => 9.55.0 
    @fluentui/react-icons: ^2.0.175 => 2.0.263 
    @types/react: ^18.2.0 => 18.3.3 
    @types/react-dom: ^18.2.0 => 18.3.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

The TagPicker doesn't focus the first available option if the the TagPickerList is imported from a different file

Expected Behavior

The TagPicker should focus the first option even when the TagPickerList is imported from a different file.
Stackblitz example

Reproduction

https://stackblitz.com/edit/gcfab9-24hew1

Steps to reproduce

1. Open stackblitz.
2. type lorem in the TagPicker

Result:

Expected:

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[bsunderhus]

The TagPicker doesn't focus the first available option if the the TagPickerList is imported from a different file - @DanieleDiLucido

Correct me here if I'm wrong @ling1726. This is not about being imported from a different file @DanieleDiLucido, it's about being on a different level on React's tree, it'll affect the order of effects being called