how to implement a drag and drop function in react js?

I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place

/* eslint-disable */
import React from 'react'
import PropTypes from 'prop-types'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// import {
//   FaFeatherAlt, FaPencilAlt, FaRegListAlt
// } from 'react-icons/fa'
// import { GiBookCover, GiSpellBook } from 'react-icons/gi'

import Tooltip from 'Components/Tooltip'
import Spinner from 'Components/Spinner'

import AccordionBox from './AccordionBox'
import AccordionSection from './AccordionSection'
import ButtonBeginningPages from './ButtonBeginningPages'
import ButtonEndingPages from './ButtonEndingPages'
import AddNewCta from './AddNewCta'

import css from './LeftNav.scss'
import TotalPageCount from "../_components/TotalPageCount";

const LeftNav = ({
  coverPageIsUpdating,
  titlePageIsUpdating,
  dedicationPageIsUpdating,
  introductionPageIsUpdating,
  isContributor, displayedScreen,
  selectedSectionId, sectionsOrder, sectionsList, updateCurrentPage,
  contentNavProps, toggleBeginningNav, toggleRecipesNav
}) => {
  const { beginningPagesIsOpen, recipesIsOpen } = contentNavProps
  // const beginningPagesScreenNameList = ['coverPage', 'titlePage', 'dedicationPage', 'introductionPage', 'tocPage']
  // const beginningPagesOpen = beginningPagesScreenNameList.includes(displayedScreen)

  const sectionsArray = sectionsOrder.map(_sectionId => ({
    id: _sectionId,
    name: sectionsList[_sectionId].title
  }))

  return (
    <div className={css.nav}>
      <TotalPageCount />
        <DragDropContext>
          <Droppable droppableId="beginningPages">
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <AccordionBox
                text="Beginning Pages"
                isOpen={beginningPagesIsOpen}
                toggle={toggleBeginningNav}
                rightCta={<div className={css.tooltip}><Tooltip /></div>}
              >
                <Draggable draggableId="frontCover" index={0}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Front Cover"
                        icon={coverPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'coverPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'coverPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="titlePage" index={1}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Title Page"
                        icon={titlePageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'titlePage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'titlePage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="dedicationPage" index={2}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Dedication"
                        isUpdating={dedicationPageIsUpdating}
                        icon={dedicationPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'dedicationPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'dedicationPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="introductionPage" index={3}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Introduction"
                        isUpdating={introductionPageIsUpdating}
                        icon={introductionPageIsUpdating ? <Spinner size="small" /> : null}
                        active={displayedScreen === 'introductionPage' || displayedScreen === 'introductionSubpage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'introductionPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
                <Draggable draggableId="tocPage" index={4}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <ButtonBeginningPages
                        text="Table of Contents"
                        active={displayedScreen === 'tocPage'}
                        canEditPage={!isContributor}
                        onClick={() => { updateCurrentPage({ type: 'tocPage' }) }}
                      />
                    </div>
                  )}
                </Draggable>
              </AccordionBox>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
        </DragDropContext>
      
      <AccordionBox
        text="Recipes"
        rightCta={<AddNewCta sectionsArray={sectionsArray} />}
        isOpen={recipesIsOpen}
        toggle={toggleRecipesNav}
      >
        {sectionsOrder && sectionsOrder.map(sectionId => (
          <AccordionSection
            id={sectionId}
            sectionsArray={sectionsArray}
            key={`section-list-item-${sectionId}`}
          />
        ))}
      </AccordionBox>
      <ButtonEndingPages
        text="Index"
        active={displayedScreen === 'indexPage'}
        onClick={() => { updateCurrentPage({ type: 'indexPage' }) }}
      />
      <ButtonEndingPages
        text="Back Cover"
        active={displayedScreen === 'backCoverPage'}
        onClick={() => { updateCurrentPage({ type: 'backCoverPage' }) }}
      />
    </div>
  )
}

LeftNav.propTypes = {
  coverPageIsUpdating: PropTypes.bool.isRequired,
  titlePageIsUpdating: PropTypes.bool.isRequired,
  dedicationPageIsUpdating: PropTypes.bool.isRequired,
  introductionPageIsUpdating: PropTypes.bool.isRequired,
  displayedScreen: PropTypes.string.isRequired,
  isContributor: PropTypes.bool,
  selectedSectionId: PropTypes.string,
  sectionsOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
  sectionsList: PropTypes.shape({}).isRequired,
  updateCurrentPage: PropTypes.func.isRequired
}

LeftNav.defaultProps = {
  isContributor: false,
  selectedSectionId: null
}

export default LeftNav

I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place