I used the kanban library for Drag and Drop and now I want their location to be saved after dragging and dropping. After the page is refreshed, they should be in the saved position

I have not tried the cookie yet. What do you guys suggest? Thansk for your help

import ReactDOM from "react-dom";
import Board, { moveCard } from "@lourenci/react-kanban";
import "@lourenci/react-kanban/dist/styles.css";

function ControlledBoard() {
    // You need to control the state yourself.
    const [controlledBoard, setBoard] = useState(board);

    function handleCardMove(_card, source, destination) {
        const updatedBoard = moveCard(controlledBoard, source, destination);
        setBoard(updatedBoard);
    }

    return (
        <Board onCardDragEnd={handleCardMove} disableColumnDrag>
            {controlledBoard}
        </Board>
    );
}

function UncontrolledBoard() {
    return (
        <>
        <Board
            allowRemoveLane
            allowRenameColumn
            disableColumnDrag
            allowRemoveCard
            onLaneRemove={console.log}
            onCardRemove={console.log}
            onLaneRename={console.log}
            initialBoard={board}
            allowAddCard
            onNewCardConfirm={draftCard => ({
                id: new Date().getTime(),
                ...draftCard
            })}
            onCardNew={console.log}
        />
        </>
    );
}

function App() {
    return (
        <>
            <h4>Example of an uncontrolled board</h4>
            <UncontrolledBoard />
            <h4>Example of a controlled board</h4>
            <p>Just the card moving is implemented in this demo.</p>
            <p>
                In this kind of board, you can do whatever you want. We just mirror your
                board state.
            </p>
            <ControlledBoard />
        </>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);```