diff --git a/src/components/App.tsx b/src/components/App.tsx
index a0f5d27fd..12658cecb 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -525,7 +525,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
         let theme = actionResult?.appState?.theme || "light";
-        const name = actionResult?.appState?.name || this.state.name;
+        let name = actionResult?.appState?.name || this.state.name;
 
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
@@ -543,6 +543,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           theme = this.props.theme;
         }
 
+        if (typeof this.props.name !== "undefined") {
+          name = this.props.name;
+        }
+
         this.setState(
           (state) => {
             // using Object.assign instead of spread to fool TS 4.2.2+ into
diff --git a/src/tests/excalidrawPackage.test.tsx b/src/tests/excalidrawPackage.test.tsx
index b2dcbe198..d27605b43 100644
--- a/src/tests/excalidrawPackage.test.tsx
+++ b/src/tests/excalidrawPackage.test.tsx
@@ -107,21 +107,28 @@ describe("<Excalidraw/>", () => {
   });
 
   describe("Test name prop", () => {
-    it('should allow editing the export name when the name prop is "undefined"', async () => {
+    it('should allow editing name when the name prop is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
-      expect(h.state.name).toContain(`${t("labels.untitled")}`);
 
       fireEvent.click(queryByTestId(container, "export-button")!);
-      const name = document.querySelector(".ExportDialog__name span");
-      expect(name?.hasAttribute("data-type")).toBe(true);
+      const textInput = document.querySelector(
+        ".ExportDialog__name .TextInput",
+      );
+      expect(textInput?.textContent).toContain(`${t("labels.untitled")}`);
+      expect(textInput?.hasAttribute("data-type")).toBe(true);
     });
 
-    it('should not allow editing the export name when the name prop is present"', async () => {
-      const { container } = await render(<Excalidraw name="test" />);
+    it('should set the name and not allow editing when the name prop is present"', async () => {
+      const name = "test";
+      const { container } = await render(<Excalidraw name={name} />);
 
-      fireEvent.click(queryByTestId(container, "export-button")!);
-      const name = document.querySelector(".ExportDialog__name span");
-      expect(name?.hasAttribute("data-type")).toBe(false);
+      await fireEvent.click(queryByTestId(container, "export-button")!);
+      const textInput = document.querySelector(
+        ".ExportDialog__name .TextInput",
+      );
+      expect(textInput?.textContent).toEqual(name);
+
+      expect(textInput?.hasAttribute("data-type")).toBe(false);
     });
   });
 });