Drag functionality for search results

Question

So I tried to learn how to implement React.

When I click the open panel, I need to search from text box, and after the results display, I need to drag the results into the table and column.

But I am not able to drag the results of the chips.

Can you let me know how to fix it?

Providing the code and sandbox below:

https://stackblitz.com/edit/vitejs-vite-nqz88f?file=src%2FApp.css,src%2Fmain.tsx,src%2FApp.jsx&terminal=dev

{panelOpen && (
                  <div className="vertical-panel">
                    <button onClick={() => setPanelOpen(false)}>close</button>
                    {columns.column3.items.map((item, index) => (
                      <Draggable key={item} draggableId={item} index={index}>
                        {(provided) => (
                          <div
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            ref={provided.innerRef}
                          >
                            <p>{item}</p>
                            <MuiChipsInput
                              value={chips}
                              onChange={handleChange}
                            />
                            <button onClick={handleSearch}>Search</button>

                            {filteredData.length > 0 ? (
                              filteredData.map((item) => (
                                <div key={item.id}>{item.lion}</div>
                              ))
                            ) : (
                              <div>No results found.</div>
                            )}
                          </div>
                        )}

                        {/* <div>
                          <MuiChipsInput
                            value={chips}
                            onChange={handleChange}
                          />

                         
                          <button onClick={handleSearch}>Search</button>


                          {filteredData.length > 0 ? (
                            filteredData.map((item) => (
                              <div key={item.id}>
                                {item.lion}
                              </div>
                            ))
                          ) : (
                            <div>No results found.</div>
                          )}
                        </div> */}
                      </Draggable>
                    ))}
                  </div>
                )}