Add layout animation to content height example

example/components/ContentHeight.tsx

@@ -1,12 +1,13 @@
 import { useState, useRef } from 'react';
 import { styled } from 'styled-components';
 import { Sheet, type SheetRef } from 'react-modal-sheet';
+import { motion } from 'framer-motion';
 
 import { Button } from './common';
 
 export function ContentHeight() {
   const [isOpen, setOpen] = useState(false);
-  const [boxes, setBoxes] = useState([0, 1]);
+  const [boxes, setBoxes] = useState(2);
   const ref = useRef<SheetRef>();
   const open = () => setOpen(true);
   const close = () => setOpen(false);
@@ -24,24 +25,29 @@ export function ContentHeight() {
         snapPoints={[-50, 100, 0]}
         detent="content-height"
       >
-        <Sheet.Container>
+        <Sheet.Container layout>
           <Sheet.Header />
 
           <Sheet.Content>
             <Sheet.Scroller>
-              <BoxList>
-                <Button onClick={() => snapTo(0)}>Snap to top</Button>
-                <Button onClick={() => snapTo(1)}>Snap to bottom</Button>
-
-                {boxes.map((_, i) => (
-                  <Box
-                    key={i}
-                    onClick={() => setBoxes((prev) => [...prev, i + 1])}
+              <motion.div layout="position">
+                <BoxList>
+                  <Button onClick={() => snapTo(0)}>Snap to top</Button>
+                  <Button onClick={() => snapTo(1)}>Snap to bottom</Button>
+                  <Button onClick={() => setBoxes((prev) => prev + 1)}>
+                    Add box
+                  </Button>
+                  <Button
+                    onClick={() => setBoxes((prev) => Math.max(0, prev - 1))}
                   >
-                    {i} (click to create new boxes )
-                  </Box>
-                ))}
-              </BoxList>
+                    Remove box
+                  </Button>
+
+                  {Array.from({ length: boxes }).map((_, i) => (
+                    <Box key={i}>{i}</Box>
+                  ))}
+                </BoxList>
+              </motion.div>
             </Sheet.Scroller>
           </Sheet.Content>
         </Sheet.Container>