fix(22851): check if active device to prevent autoconnect for hw (#25503

)

## **Description**

There was an issue where the selected device was kept "unlocked" by
keyring controller. Then, the following logic was always redirecting to
the selected device "page" and was connecting again to the previously
unlocked hardware device:

https://github.com/MetaMask/metamask-extension/blob/develop/ui/pages/create-account/connect-hardware/index.js#L135-L139
```ts
      const unlocked = await this.props.checkHardwareStatus(device, path);
      if (unlocked) {
        this.setState({ unlocked: true });
        this.getPage(device, 0, path);
      }
```
To fix this, I simply checked if a device was active or not. Tested on
Ledger, Trezor and QR based wallets

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25503?quickstart=1)

## **Related issues**

Fixes: #22851

## **Manual testing steps**

1. From account list, click on "add account or hardware wallet"
2. then click on "add hardware wallet"
3. select a hardware wallet
4. Wait for the pop up for HID access (if you use the Trezor simulator,
you can close the pop-up)
5. Click cancel or select an account (and add it). You should be
redirected to device selection.
7. Click on account
8. Add hardware wallet
9. You should now be able to select again the device you want (while
before last active device was automatically selected and user redirected
to account selection)

## **Screenshots/Recordings**
### **Before**

https://github.com/MetaMask/metamask-extension/assets/574787/931430b2-44d1-4aaa-a77a-870abe24e420


### **After**


https://github.com/MetaMask/metamask-extension/assets/574787/822c225a-34ac-4403-913d-e848ad1c76c0

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/create-account/connect-hardware/index.js

@@ -133,7 +133,7 @@ class ConnectHardwareForm extends Component {
     ]) {
       const path = this.props.defaultHdPaths[device];
       const unlocked = await this.props.checkHardwareStatus(device, path);
-      if (unlocked) {
+      if (unlocked && this.state.device) {
         this.setState({ unlocked: true });
         this.getPage(device, 0, path);
       }