AutoScrolling doesn't work

[sarthakkhanduja]

In my project, auto scrolling doesn't work for the container with DragAndDropContext.
What I'm trying to achieve is, ideally, when in the mobile screen view, if I drag a component to a different droppable container that isn't completely visible in the screen yet, the container should scroll horizontally to show that container.
But this isn't happening.

Project - https://github.com/sarthakkhanduja/todo-app
Component - ProjectHome
Styling library - Tailwind.

Here's that specific piece of code.
I saw that there are props that can be enabled in the Droppable containers or their parents to enable this and set the maxAcceleration also but I'm not sure how to do it since there's no apparent documentation for it.

Any help is appreciated!!

<div className="h-[810px] lg:h-[900px]">            
            <DragDropContext onDragEnd={onDragEnd}>
                <div className="px-4 sm:px-16 mt-2 grid grid-cols-[repeat(3,minmax(320px,1fr))] gap-4 py-3 h-5/6 overflow-x-auto scroll-auto">
                    <div className="cols-span-1 bg-red-200 rounded-xl overflow-auto red-scrollbar">
                        <div className="flex justify-center items-center h-8 border-b-2 border-blue-marguerite-300 font-bold">
                            Yet to Start
                        </div>
                        {todosLoading ? <div className="h-full w-full flex justify-center items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-300 -50 800 800"><rect fill="#FF0F53" stroke="#FF0F53" strokeWidth="3" width="30" height="30" x="25" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="#FF0F53" stroke="#FF0F53" strokeWidth="3" width="30" height="30" x="85" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="#FF0F53" stroke="#FF0F53" strokeWidth="3" width="30" height="30" x="145" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>
                                        </div> : <Droppable droppableId="yetToStart">
                                                            {(provided) => (
                                                                <div className="flex flex-col p-4 justify-center items-center w-full" ref={provided.innerRef} {...provided.droppableProps}>
                                                                    {yetToStartTodo.map((todo, index) => (
                                                                        todo.status == "Yet to Start" ? <Todo key={todo._id} fetchTodo={fetchTodo} setTodosLoading={setTodosLoading} currentProject={props.currentProject} id={todo._id} title={todo.title} description={todo.description} index={index} /> : ""
                                                                    ))}
                                                                    {provided.placeholder}
                                                                </div>
                                                            )}
                                                        </Droppable>}
                        
                    </div>
                    <div className="cols-span-1 bg-yellow-200 rounded-xl overflow-auto yellow-scrollbar">
                        <div className="flex justify-center items-center h-8 border-b-2 border-blue-marguerite-300 font-bold">
                            In Progress
                        </div>
                        {todosLoading ? <div className="h-full w-full flex justify-center items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-300 -50 800 800"><rect fill="#FFCD0B" stroke="#FFCD0B" strokeWidth="3" width="30" height="30" x="25" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="#FFCD0B" stroke="#FFCD0B" strokeWidth="3" width="30" height="30" x="85" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="#FFCD0B" stroke="#FFCD0B" strokeWidth="3" width="30" height="30" x="145" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>
                                        </div> : <Droppable droppableId="inProgress">
                                                            {(provided) => (
                                                                <div className="flex flex-col p-4 justify-center items-center w-full" ref={provided.innerRef} {...provided.droppableProps}>
                                                                    {inProgressTodo.map((todo, index) => (
                                                                        todo.status == "In Progress" ? <Todo key={todo._id} fetchTodo={fetchTodo} setTodosLoading={setTodosLoading} currentProject={props.currentProject} id={todo._id} title={todo.title} description={todo.description} index={index} /> : ""
                                                                    ))}
                                                                    {provided.placeholder}
                                                                </div>
                                                            )}
                                                        </Droppable>}
                        
                    </div>
                    <div className="cols-span-1 bg-green-200 rounded-xl overflow-auto green-scrollbar">
                        <div className="flex justify-center items-center h-8 border-b-2 border-blue-marguerite-300 font-bold">
                            Completed
                        </div>
                        {todosLoading ? <div className="h-full w-full flex justify-center items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-300 -50 800 800"><rect fill="#06FF36" stroke="#06FF36" strokeWidth="3" width="30" height="30" x="25" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="#06FF36" stroke="#06FF36" strokeWidth="3" width="30" height="30" x="85" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="#06FF36" stroke="#06FF36" strokeWidth="3" width="30" height="30" x="145" y="85"><animate attributeName="opacity" calcMode="spline" dur="1.8" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>
                                        </div> : <Droppable droppableId="completed">
                                                            {(provided) => (
                                                                <div className="flex flex-col p-4 justify-center items-center w-full" ref={provided.innerRef} {...provided.droppableProps}>
                                                                    {completedTodo.map((todo, index) => (
                                                                        todo.status == "Completed" ? <Todo key={todo._id} fetchTodo={fetchTodo} setTodosLoading={setTodosLoading} currentProject={props.currentProject} id={todo._id} title={todo.title} description={todo.description} index={index} /> : ""
                                                                    ))}
                                                                    {provided.placeholder}
                                                                </div>
                                                            )}
                                                        </Droppable>}
                        
                    </div>
                </div>
            </DragDropContext>
            </div>