fix material renaming (#10297)

packages/ui/src/components/editor/panels/Properties/material/index.tsx

@@ -44,6 +44,7 @@ import { TransparencyDitheringPlugin } from '@etherealengine/engine/src/avatar/c
 import { SourceComponent } from '@etherealengine/engine/src/scene/components/SourceComponent'
 import { setMaterialName } from '@etherealengine/engine/src/scene/materials/functions/materialSourcingFunctions'
 import { NO_PROXY, none, State, useHookstate } from '@etherealengine/hyperflux'
+import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import createReadableTexture from '@etherealengine/spatial/src/renderer/functions/createReadableTexture'
 import { getDefaultType } from '@etherealengine/spatial/src/renderer/materials/constants/DefaultArgs'
 import {
@@ -139,8 +140,7 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
   }, [materialComponent, materialComponent.prototypeEntity])
 
   const prototypeName = useHookstate('')
-  const materialName = useHookstate('')
-  materialName.set(material.name)
+  const materialName = useComponent(entity, NameComponent)
   prototypeName.set(material.type)
 
   useEffect(() => {
@@ -205,10 +205,7 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
   return (
     <div className="relative flex flex-col gap-2">
       <InputGroup name="Name" label={t('editor:properties.mesh.material.name')}>
-        <StringInput
-          value={materialComponent.material.value!.name}
-          onChange={(name) => setMaterialName(entity, name)}
-        />
+        <StringInput value={materialName.value} onChange={(name) => setMaterialName(entity, name)} />
       </InputGroup>
       <InputGroup name="Source" label={t('editor:properties.mesh.material.source')}>
         <div className="border-grey-500 flex flex-row gap-2 rounded-lg border-2 border-solid bg-theme-surface-main p-1 text-xs text-white">