[Bug]: Carousel component memory leak

### Component

Carousel

### Package version

9.63.0

### React version

18.2.0

### Environment

```shell
System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 55.85 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @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

Memory leak test produces the following leaks:

```
--Similar leaks in this run: 3214--
--Retained size of leaked objects: 448.6KB--
[Window] (native) @189275 [25.1KB]
  --6 (element)--->  [HTMLDocument] (native) @5359727 [103.7KB]
  --62 (element)--->  [InternalNode] (native) @106802 [95KB]
  --1 (element)--->  [InternalNode] (native) @106782 [95KB]
  --13 (element)--->  [InternalNode] (native) @146456 [112 bytes]
  --1 (element)--->  [InternalNode] (native) @146420 [112 bytes]
  --1 (element)--->  [EventListener] (native) @146422 [112 bytes]
  --1 (element)--->  [V8EventListener] (native) @146626 [40 bytes]
  --1 (element)--->  [documentDownListener] (closure) @7611753 [8.7KB]
  --context (internal)--->  [<function scope>] (object) @7611755 [8.6KB]
  --emblaApi (variable)--->  [Object] (object) @7917967 [1.8KB]
  --slidesNotInView (property)--->  [slidesNotInView] (closure) @7919383 [32 bytes]
  --context (internal)--->  [<function scope>] (object) @7919337 [1.1KB]
  --root (variable)--->  [Detached <div role="presentation" draggable="true" class="fui-CarouselViewport ___kf3xbv0_1fome3j f6dzj5z f14z66ap">] (native) @7184007 [840 bytes]
  --9 (element)--->  [Detached <div class="___1uhwzmo_0000000 ftuwxu6 f1869bpl fly5x3f f19gb1f4 fj00lsa f1jq0wj0">] (native) @7184675 [19.4KB]
  --6 (element)--->  [Detached <div>] (native) @7184679 [13.3KB]
  --5 (element)--->  [Detached <div class="fui-CarouselNavContainer ___1g36ldg_1s0jf03 f22iagw f1063pyq f4d9j23 fly5x3f f1aehjj5 f1s184ao">] (native) @7184681 [12.9KB]
  --6 (element)--->  [Detached <span hidden="">] (native) @7184683 [528 bytes]
  --7 (element)--->  [Detached <button type="button" tabindex="0" class="fui-CarouselButton fui-Button r1alrhcs fui-CarouselNavContainer__next ___1162s01_qaxvkv0 fgr6219 f10jk5vf fkfq4zb fhovq9v fc5wo7j f8491dx f1p3nwhy f11589ue f1q5o8ev f1pdflbu f1t94bn6 f1s2uweq fr80ssc f1ukrpxl fecsdlb fnwyq0v ft1hn21 fuxngvv fy5bs14 fsv2rcd f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1omzyqd f1dfjoow f1j98vj9 fj8yq94 f4xjyn1 f1et0tmh f9ddjv3 f1wi8ngl f18ktai2 fwbmr0d f44c6la" aria-labelledby="lpc-fluent-lpc-FluentV9-tooltip-rn" aria-disabled="false">] (native) @7184997 [4.1KB]
  --5 (element)--->  [Detached <span class="fui-CarouselButton__icon fui-Button__icon rywnvv2">] (native) @7184999 [3KB]
  --9 (element)--->  [Detached InternalNode] (native) @131890 [128 bytes]
  --1 (element)--->  [Detached InternalNode] (native) @133332 [128 bytes]
  --2 (element)--->  [Detached InternalNode] (native) @138432 [88 bytes]
  --1 (element)--->  [Detached InternalNode] (native) @126414 [88 bytes]
  --1 (element)--->  [Detached Attr] (native) @126416 [88 bytes]

--Similar leaks in this run: 1--
--Retained size of leaked objects: 7.1KB--
[<synthetic>] (synthetic) @1 [101.7MB]
  --2 (shortcut)--->  [Window / https://localhost:3333] (object) @5350561 [82.5KB]
  --ReactDOM (property)--->  [Object] (object) @5438507 [1.5KB]
  --unstable_renderSubtreeIntoContainer (property)--->  [renderSubtreeIntoContainer] (closure) @5438529 [80 bytes]
  --context (internal)--->  [<function scope>] (object) @5437967 [186.9KB]
  --rootWithPassiveNestedUpdates (variable)--->  [FiberRootNode] (object) @7196445 [11KB]
  --current (property)--->  [Detached FiberNode HostRoot] (object) @7709319 [7.1KB]
--Similar leaks in this run: 1--
--Retained size of leaked objects: 788 bytes--
[Window] (native) @189275 [25.1KB]
  --6 (element)--->  [HTMLDocument] (native) @5359727 [103.7KB]
  --62 (element)--->  [InternalNode] (native) @106802 [95KB]
  --1 (element)--->  [InternalNode] (native) @106782 [95KB]
  --13 (element)--->  [InternalNode] (native) @146456 [112 bytes]
  --1 (element)--->  [InternalNode] (native) @146420 [112 bytes]
  --1 (element)--->  [EventListener] (native) @146422 [112 bytes]
  --1 (element)--->  [V8EventListener] (native) @146626 [40 bytes]
  --1 (element)--->  [documentDownListener] (closure) @7611753 [8.7KB]
  --context (internal)--->  [<function scope>] (object) @7611755 [8.6KB]
  --options (variable)--->  [Object] (object) @7790289 [16 bytes]
  --onSelectViaDrag (property)--->  [<closure>] (closure) @7449273 [2.2KB]
  --context (internal)--->  [<function scope>] (object) @7700933 [2.2KB]
  --fn (variable)--->  [<closure>] (closure) @7700935 [28 bytes]
  --context (internal)--->  [<function scope>] (object) @7408887 [320 bytes]
  --onDragIndexChange (variable)--->  [<closure>] (closure) @7700811 [180 bytes]
  --context (internal)--->  [<function scope>] (object) @7789453 [148 bytes]
  --callback (variable)--->  [<closure>] (closure) @7449355 [76 bytes]
  --context (internal)--->  [<function scope>] (object) @7700971 [288 bytes]
  --onFeedback (variable)--->  [<closure>] (closure) @7449493 [156 bytes]
  --context (internal)--->  [<function scope>] (object) @7746909 [80 bytes]
  --eventing (variable)--->  [Object] (object) @7258425 [23.2KB]
  --bubble (property)--->  [bubble] (closure) @7284683 [360 bytes]
  --context (internal)--->  [<function scope>] (object) @7280055 [284 bytes]
  --unmountEventingRef (variable)--->  [Object] (object) @7280187 [16 bytes]
  --current (property)--->  [Object] (object) @7445131 [22.6KB]
  --bubble (property)--->  [bubble] (closure) @7451971 [22.6KB]
  --context (internal)--->  [<function scope>] (object) @7451989 [22.5KB]
  --onSelectPrompt (variable)--->  [native_bind] (closure) @7266903 [864 bytes]
  --bound_argument_0 (shortcut)--->  [Detached FiberNode react.lazy FunctionComponent] (object) @7403491 [788 bytes]
```

### Expected Behavior

Memory leak test should produce zero leaks relating to this component.

### Reproduction

See steps to reproduce

### Steps to reproduce

Problem exists in the 1JS repository for the Live Persona Card implementation.
The Carousel is used in the new Copilot Tab on the LPC and can be seen there:
![Image](https://github.com/user-attachments/assets/bab9d091-59ca-4315-9bcb-f79a03ed511a)
The tests are E2E tests run from the `lpc-teams-web` package


Accessing the 1JS Repo:
- [Gaining Access](https://dev.azure.com/office/Office/_wiki/wikis/1JS/69505/Gaining-Access)
- [Using Codespaces](https://dev.azure.com/office/Office/_wiki/wikis/1JS/115137/2-Creating-a-codespace)

Running the tests:
- Install dependencies: `yarn fast @1js/lpc-teams-web`
- Build the package: `yarn build-scope @1js/lpc-teams-web`
- In two separate terminals of your enlistment navigate to the `lpc-teams-web` package: `cd packages/lpc-teams-web`
- In the first terminal run the experience: `yarn start:webpack`
- In the second terminal, run the Playwright tests: `npx playwright test --config=playwright.optional.config.ts --ui-host 0.0.0.0`
- This should open a browser tab for the playwright tests
- The memory tests for the Copilot tab are located at the bottom in a test file called `EVCopilotTab-memory.e2e-optional.ts`
![Image](https://github.com/user-attachments/assets/a160b281-9626-4bc5-b0d0-9ed551a6f383)
- Click the Run button next to this test
- Observer the Console logs (Scroll to the bottom for the leak output)

Where is the Carousel being used?
[PeopleRecommendedPromptsTablets.tsx](https://office.visualstudio.com/Office/_git/1JS/?path=/midgard/packages/people-recommended-prompts/src/PeopleRecommendedPromptsTablets.tsx&version=GBmain&line=258&lineEnd=258&lineStartColumn=15&lineEndColumn=24&lineStyle=plain&_a=contents)

### Are you reporting an Accessibility issue?

None

### Suggested severity

Urgent - No workaround and Products/sites are affected

### Products/sites affected

Copilot in LPC

### Are you willing to submit a PR to fix?

no

### Validations

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Bug]: Carousel component memory leak #34658

Component

Package version

React version

Environment

Current Behavior

Expected Behavior

Reproduction

Steps to reproduce

Are you reporting an Accessibility issue?

Suggested severity

Products/sites affected

Are you willing to submit a PR to fix?

Validations

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Bug]: Carousel component memory leak #34658

Description

Component

Package version

React version

Environment

Current Behavior

Expected Behavior

Reproduction

Steps to reproduce

Are you reporting an Accessibility issue?

Suggested severity

Products/sites affected

Are you willing to submit a PR to fix?

Validations

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions