Fix Editor network Provisioning (#7829)

## Summary

editor provisioning now creates data channels and handles peer media


## References

closes #_insert number here_


## Checklist
- [ ] If this PR is still a WIP, convert to a draft
- [ ] When this PR is ready, mark it as "Ready for review"
- [ ] [ensure all checks pass](https://github.com/etherealengine/etherealengine/wiki/Testing-&-Contributing)
- [ ] Changes have been manually QA'd
- [ ] Changes reviewed by at least 2 approved reviewer


## QA Steps

_List any additional steps required to QA the changes of this PR, as well as any supplemental images or videos._

Author: HexaField

…useEditorNetworkInstanceProvisioning.tsx …me/EditorNetworkInstanceProvisioning.tsxpackages/editor/src/components/realtime/useEditorNetworkInstanceProvisioning.tsx renamed to packages/editor/src/components/realtime/EditorNetworkInstanceProvisioning.tsx packages/editor/src/components/realtime/useEditorNetworkInstanceProvisioning.tsx renamed to packages/editor/src/components/realtime/EditorNetworkInstanceProvisioning.tsx

@@ -1,16 +1,16 @@
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import {
   LocationInstanceConnectionService,
-  useLocationInstanceConnectionState,
   useWorldInstance
 } from '@etherealengine/client-core/src/common/services/LocationInstanceConnectionService'
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
+import { DataChannels } from '@etherealengine/client-core/src/components/World/ProducersAndConsumers'
+import { PeerMedia } from '@etherealengine/client-core/src/media/PeerMedia'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { NetworkState } from '@etherealengine/engine/src/networking/NetworkState'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
-export const useEditorNetworkInstanceProvisioning = () => {
+export const EditorNetworkInstanceProvisioning = () => {
   const engineState = useEngineState()
   const worldHostID = useHookstate(getMutableState(NetworkState).hostIds.world).value
 
@@ -31,4 +31,11 @@ export const useEditorNetworkInstanceProvisioning = () => {
     currentLocationInstanceConnection?.connecting,
     currentLocationInstanceConnection?.provisioned
   ])
+
+  return (
+    <>
+      <DataChannels />
+      <PeerMedia />
+    </>
+  )
 }

packages/editor/src/components/realtime/WorldInstanceConnection.tsx

@@ -25,7 +25,7 @@ import {
   EditorActiveInstanceServiceReceptor,
   useEditorActiveInstanceState
 } from './EditorActiveInstanceService'
-import { useEditorNetworkInstanceProvisioning } from './useEditorNetworkInstanceProvisioning'
+import { EditorNetworkInstanceProvisioning } from './EditorNetworkInstanceProvisioning'
 
 export const WorldInstanceConnection = () => {
   const { t } = useTranslation()
@@ -60,8 +60,6 @@ export const WorldInstanceConnection = () => {
     }
   }, [])
 
-  useEditorNetworkInstanceProvisioning()
-
   const onSelectInstance = (selectedInstance: string) => {
     if (selectedInstance === 'None' || (worldNetworkHostId && selectedInstance !== worldNetworkHostId)) {
       if (worldNetworkHostId) {
@@ -90,6 +88,7 @@ export const WorldInstanceConnection = () => {
 
   return (
     <div className={styles.toolbarInputGroup} id="transform-space">
+      <EditorNetworkInstanceProvisioning />
       <InfoTooltip title="Active Instances">{getIcon()}</InfoTooltip>
       <SelectInput
         className={styles.selectInput}