diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
index 602fe9c2a5a6..d415c38b4f5a 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
@@ -33,11 +33,8 @@ export const _SidebarProvider = (
     (value: SidebarState | ((value: SidebarState) => SidebarState)) => {
       const computedState = typeof value === "function" ? value(state) : value;
 
-      if (setStateProp) {
-        setStateProp(computedState);
-      } else {
-        _setState(computedState);
-      }
+      _setState(computedState);
+      setStateProp?.(computedState);
     },
     [setStateProp, state],
   );
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/ControlledStateSidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/ControlledStateSidebar.tsx
new file mode 100644
index 000000000000..b7c9148514ea
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/ControlledStateSidebar.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import {
+  Sidebar,
+  SidebarTrigger,
+  SidebarProvider,
+  type SidebarState,
+  type SidebarProps,
+} from "../src/index";
+import { Flex } from "../../Flex";
+
+type ControlledStateSidebarProps = SidebarProps & {
+  children: React.ReactNode;
+};
+
+export const ControlledStateSidebar = (props: ControlledStateSidebarProps) => {
+  const { children, ...sidebarProps } = props;
+  const [state, setState] = useState<SidebarState>("collapsed");
+
+  return (
+    <SidebarProvider
+      onStateChange={setState}
+      side="start"
+      state={state}
+      style={{
+        height: "50vh",
+        border: "1px solid var(--color-bd-elevation-1)",
+      }}
+    >
+      <Sidebar {...sidebarProps}>{children}</Sidebar>
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
+    </SidebarProvider>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
index 01c12545b70f..2b863f61b0fa 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Sidebar, SidebarTrigger, SidebarProvider } from "../src/index";
-import { Flex } from "../../Flex";
-import { Text, Icon } from "@appsmith/wds";
+import { Text, Icon, Flex } from "@appsmith/wds";
+
+import { ControlledStateSidebar } from "./ControlledStateSidebar";
 
 const meta: Meta<typeof Sidebar> = {
   component: Sidebar,
@@ -126,3 +127,13 @@ export const WithRenderProps: Story = {
     </SidebarProvider>
   ),
 };
+
+export const WithControlledState: Story = {
+  render: (args) => {
+    return (
+      <ControlledStateSidebar {...args}>
+        <DemoContent />
+      </ControlledStateSidebar>
+    );
+  },
+};