Drag and Drop Framer Motion как сделать?

Question

[LI4NOOST]

import classes from './overlay.module.sass'
import {Reorder} from "framer-motion";
import {useEffect, useState} from "react";

const Overlay = () => {
    const [isCards, setCards] = useState([])
    const cards = [{
        'name': 'perviy',
        'id': '1',
        'checked': 'net'
    },
        {
            'name': 'vtoroy',
            'id': '2',
            'checked': 'da'
        },
        {
            'name': 'treti',
            'id': '3',
            'checked': 'da'
        },
        {
            'name': '4',
            'id': '4',
            'checked': 'da'
        },

    ]
    useEffect(()=>{
        setCards(cards)
    }, [])

 console.log(isCards)

    return (
        <Reorder.Group as={"div"} axis={"y"} onReorder={setCards} className={classes.overlay} values={isCards}>
            {isCards.map((item) =>(
                <Reorder.Item as={"div"} value={item} key={item.id} className={classes.lol}>
                    <h2>{item.name}</h2>
                </Reorder.Item>
            ))}
        </Reorder.Group>
    )
}
export default Overlay

Пытаюсь освоить dnd решил для начала использовать Framer Motion, все заработало, но столкнулся с проблемой- элементы меняются местами странно. Нельзя несколько раз поменять одни и те же элементы местами(первый со вторым, к примеру), они просто начинают игнорировать друг друга. Может быть я неправильно задал параметры отслеживания?

Comments

[Александр Талалаев]

Загрузите пожалуйста куда-нибудь рабочую демку.
PS зачем там useEffect ?

[LI4NOOST]

Александр Талалаев, https://github.com/xLI4NOST/testDND