useSyncExternalStore for audio access in microphone demo

[penx]

Use useSyncExternalStore rather than useEffect for audio access

As suggested at https://github.com/speechmatics/speechmatics-js-sdk/pull/6#discussion_r1325953737

From the React docs:

Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. Sometimes, your components may need to subscribe to some data outside of the React state. This data could be from a third-party library or a built-in browser API ... Although it’s common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. https://react.dev/learn/you-might-not-need-an-effect#subscribing-to-an-external-store

Another reason to add useSyncExternalStore is when you want to subscribe to some value exposed by the browser that changes over time https://react.dev/reference/react/useSyncExternalStore#subscribing-to-a-browser-api

Also

• Extract MicSelect to own component
  • to prevent hydration issues
• Disable mic select unless in configure or block state
  • a user shouldn't be able to change the microphone during a transcription
• Allow transcription to be started in blocked state
  • some browsers will reshow access dialog)
• Disable default dropdown and add a clickable element to trigger auth dialog
  • Previously, a click on the dropdown would trigger the access dialog or the contents of the dropdown to be changed after being opened. Using a button when the drop down has not been populated (due to not being granted access or issues with Firefox) ensures that the initial click will only populate the dropdown.
• Track audio state for devices, denied, inside a singleton class
  • This pattern seems like a good fit for interaction with useSyncExternalStore
• Update device list when devices are plugged in or removed
• Provide a getUserMedia function from class, rather than calling devices API directly
  • allows us to update our devices list after each time it is called