smoth scroll

package.json

@@ -33,6 +33,7 @@
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-scripts": "^5.0.0",
+        "react-scroll": "^1.8.7",
         "web-vitals": "^1.0.1",
         "yup": "^0.32.11"
     },

src/Pages/Pruebas/Cleaver.jsx

@@ -9,9 +9,12 @@ import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import { TransitionGroup } from 'react-transition-group';
+import * as Scroll from 'react-scroll';
 
 export function Cleaver() {
 
+var scroll = Scroll.animateScroll;
+
   let auth = useAuth();
   let token = useMemo(() => auth.getToken(), [auth])
 
@@ -30,28 +33,20 @@ export function Cleaver() {
   }, [token]);
 
   const handleAddQuestion = () => {
+    let op = { smooth: true, duration: 200, delay :1, offset :900}
+    scroll.scrollToBottom(op);
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
     if (nextHiddenItem) {
       setPreguntas(nextHiddenItem);
       let temp = nextHiddenItem.shift()
       setRespondidas([...totalRespondidas,temp]);
-      console.log('RESPONDIDAS: ', totalRespondidas)
-      scrollToBottom();
     }
   };
   
-  let last = useRef(null)
 
-const scrollToBottom = () => {
-    if(last.current){
-      last.current.scrollIntoView()
-    }
-  }
+var scroll = Scroll.animateScroll;
 
-  // useEffect(() => {
-    // scrollToBottom()
-  // }, [totalRespondidas]);
 
   return (
 
@@ -71,7 +66,6 @@ const scrollToBottom = () => {
         </Box>
 
       <Button
-        ref={last}
         variant="contained"
         disabled={totalRespondidas.length >= totalPreguntas.length}
         onClick={handleAddQuestion}