docs(message): fix broken withMargin story

src/components/message/message.stories.tsx

@@ -107,33 +107,53 @@ export const WithRichContent: ComponentStory<typeof Message> = () => {
 };
 
 export const WithMargin: ComponentStory<typeof Message> = () => {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState({
+    MessageOne: true,
+    MessageTwo: true,
+    MessageThree: true,
+  });
+
+  const displayButton = Object.values({ ...isOpen }).every(
+    (value) => value === false
+  );
   return (
     <>
-      {!isOpen && <Button onClick={() => setIsOpen(true)}>Open Message</Button>}
+      {displayButton && (
+        <Button
+          onClick={() =>
+            setIsOpen({
+              MessageOne: true,
+              MessageTwo: true,
+              MessageThree: true,
+            })
+          }
+        >
+          Open Message
+        </Button>
+      )}
       <Message
-        open={isOpen}
-        onDismiss={() => setIsOpen(false)}
+        open={isOpen.MessageOne}
+        onDismiss={() => setIsOpen({ ...isOpen, MessageOne: false })}
         variant="warning"
         m={1}
       >
-        Some custom message
+        This is message one.
       </Message>
       <Message
-        open={isOpen}
-        onDismiss={() => setIsOpen(false)}
+        open={isOpen.MessageTwo}
+        onDismiss={() => setIsOpen({ ...isOpen, MessageTwo: false })}
         variant="warning"
         m={3}
       >
-        Some custom message
+        This is message two.
       </Message>
       <Message
-        open={isOpen}
-        onDismiss={() => setIsOpen(false)}
+        open={isOpen.MessageThree}
+        onDismiss={() => setIsOpen({ ...isOpen, MessageThree: false })}
         variant="warning"
         m="16px"
       >
-        Some custom message
+        This is message three.
       </Message>
     </>
   );