refactor: [M3-6908] - Replace react-select in Profile

[carrillo-erik]

Description 📝

This PR helps remove part of the react-select dependency for accessibility reasons and to consolidate our usage of third-party libraries. In particular, it replaces the EnhancedSelect with our more versatile MUI-based Autocomplete component within the Profile feature.

Changes 🔄

• Introduce a new sxPopperComponent prop (optional) for the Autocomplete which allows custom CSS styling for the PopperComponent.
• The PhoneVerification depended heavily on the react-select instance, and by removing it, the previous styling required to be redone. This was the reason for introducing the new sxPopperComponent prop.
• Update TimezoneForm to TimeZoneForm.
• Update default exports with named exports and corresponding lazy() imports.

Target release date 🗓️

09/03/2024

How to test 🧪

Verification steps

(How to verify changes)

• Verify that the Profile feature works as expected.
• Inspect the Profile pages for any visual regressions.

As an Author I have considered 🤔

Check all that apply

• [x] 👀 Doing a self review
• [ ] ❔ Our contribution guidelines
• [ ] 🤏 Splitting feature into small PRs
• [x] ➕ Adding a changeset
• [x] 🧪 Providing/Improving test coverage
• [ ] 🔐 Removing all sensitive information from the code and PR description
• [ ] 🚩 Using a feature flag to protect the release
• [ ] 👣 Providing comprehensive reproduction steps
• [ ] 📑 Providing or updating our documentation
• [ ] 🕛 Scheduling a pair reviewing session
• [ ] 📱 Providing mobile support
• [ ] ♿ Providing accessibility support

[github-actions[bot]]

Coverage Report: ✅
Base Coverage: 86.64%
Current Coverage: 86.64%

[carrillo-erik]

@mjac0bs

There's one more failure that is legit and a result of these changes: security-questions.spec.ts. It's still looking for the enhanced select.

I've fixed the issue with the test looking for the old enhanced select component and is now passing locally.

I'm seeing a lot of console warnings about uncontrolled vs controlled when changing the values of the Autocomplete fields. I'd check to see how we're handling this in other uses of Autocomplete throughout the app.

These have been addressed with my latest changes. Thank you for inspecting the browser console and pointing these out.

[mjac0bs]

@carrillo-erik Looks like there's a merge conflict that will need to be resolved. I'll take a final pass at this once this branch is up to date and Chandra's UX feedback is addressed. Thanks for addressing initial feedback.