<s>[INST] Can you please write me small code snippet for React functional component, that has two divs and each div have multiple items inside of them, source of items is an Array, also each item should be drag & drop between two divs ? [/INST] Here's a sample code for a React functional component with two divs that have items inside of them. The items are obtained from an array and each item can be dragged and dropped between the two divs:

'''javascript
import React, { useState } from "react";

const App = () => {
  const [list1, setList1] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" }
  ]);
  const [list2, setList2] = useState([
    { id: 4, text: "Item 4" },
    { id: 5, text: "Item 5" }
  ]);

  const onDragStart = (event, source) => {
    event.dataTransfer.setData("source", source);
  };

  const onDrop = (event, target) => {
    const source = event.dataTransfer.getData("source");
    const sourceList = source === "list1" ? list1 : list2;
    const targetList = target === "list1" ? list1 : list2;
    const item = sourceList.find(i => i.id === Number(event.dataTransfer.getData("id")));

    setList1(source === "list1" && target === "list2" ? sourceList.filter(i => i.id !== item.id) : list1);
    setList2(source === "list2" && target === "list1" ? sourceList.filter(i => i.id !== item.id) : list2);
    targetList.push(item);

    target === "list1" ? setList1([...targetList]) : setList2([...targetList]);
  };

  return (
    <div className="container">
      <div
        className="list"
        onDrop={event => onDrop(event, "list1")}
        onDragOver={event => event.preventDefault()}
      >
        {list1.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list1")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
      <div
        className="list"
        onDrop={event => onDrop(event, "list2")}
        onDragOver={event => event.preventDefault()}
      >
        {list2.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list2")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;
''' </s>