[BUG] Microphone icon is persisted on browser's tab after an incoming call.

[nhatnguyennguyen]

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

I have an incoming call, it worked successfully. But after the call is finished, I go back to the screen before, microphone icon still appear on the tab, there are no ways to hide it. I have tried with device and deviceAudio: destroy, disconnect, unregister, removeListeners but nothing worked

Code to reproduce the issue:

const useIncomingCall = () => {
  const [device, setDevice] = useState<Device>();
  const initCall = async ({ token }: IncomingCall) => {
    const device = new Device(token, {
      closeProtection: true
    });

    await device.register();

    device.on('incoming', (connection) => {
      connection.accept();
    });

    device.on('error', (error) => {
      console.error('Twilio Device error:', error);
    });
    setDevice(device);
  };

  useEffect(() => {
    return () => {
      device?.destroy();
    };
  }, [device]);

  return {
    initCall
  };
};

export default useIncomingCall;

Expected behavior:

Microphone icon on browser shouldn't show

Actual behavior:

Microphone icon still show even call device.destroy()

[kpchoy]

Hello @nhatnguyennguyen, I was not able to reproduce this issue locally. Please take a look at our example here on how to handle incoming calls

You can also run the /twilio-voice-dialer component in our example repo: twilio-voice-js-reference-components