fix useOperationsEditorState wasn't returned updated return value (#4063)

* add `graphiql.css`, CSS file without CSS without importing fonts and monaco-editor styles

* add `graphiql.css`, CSS file without CSS without importing fonts and monaco-editor styles

* fix: `useOperationsEditorState` wasn’t returning the updated editor value

* Update packages/graphiql-react/src/utility/hooks.ts

Author: dimaMachina

.changeset/yellow-coins-act.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+fix `useOperationsEditorState` wasn't returned updated return value

packages/graphiql-react/src/utility/hooks.ts

@@ -51,10 +51,14 @@ export const useEditorState = (
   // eslint-disable-next-line react-hooks/react-compiler -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
   'use no memo';
   const editorInstance = useGraphiQL(state => state[`${editor}Editor`]);
-  const editorValue = editorInstance?.getValue() ?? '';
-
+  const [editorValue, setEditorValue] = useState(
+    () => editorInstance?.getValue() ?? '',
+  );
   const handleChange = useCallback(
-    (value: string) => editorInstance?.setValue(value),
+    (value: string) => {
+      editorInstance?.setValue(value);
+      setEditorValue(value);
+    },
     [editorInstance],
   );
   return useMemo(