This is the jsx code i used. I have a draggable componet in DrawEvent which on drag start sets state to the id of object being dragged and on dropping it console logs the values. But here console log shows the value to be undefined even thogh i set them earlier.

I have tried console logging and all events are fired but none of them changes the value of ObjRes I don’t know why, It remains undefined.

import { useState } from "react";

const resources = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const dates = [];
for (let i = 1; i < 32; i++) {
  dates.push(i);
}

const TOTAL_TIME = 31 * 24 * 4;

const exdata = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],
];

export default function Resources() {
  const [data, setData] = useState(exdata);
  return (
    <div className="grid h-screen overflow-scroll w-full relative scrollbar-custom">
      <div
        className={`grid grid-cols-34 sticky top-0 z-50 bg-white items-center`}
      >
        <div className="col-span-3 whitespace-nowrap h-full sticky left-0 bg-white border py-1"></div>
        {dates.map((date) => (
          <div
            key={date}
            className="col-span-1 border px-2 py-1 whitespace-nowrap"
          >
            {date} May
          </div>
        ))}
      </div>
      {resources.map((res) => {
        return (
          <div key={res} className={`grid grid-cols-34`}>
            <div className="col-span-3 whitespace-nowrap h-full sticky left-0 bg-white z-40 pl-6 pr-4 py-4 border font-semibold">
              Resource - {res.toString()}
            </div>
            <div className="col-span-31 space-y-2">
              <RenderEvent propsData={data} setdata={setData} res={res} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

function RenderEvent(props) {
  const [objRes, setObjRes] = useState();
  const setData = props.setdata;
  const res = props.res;
  const arr = props.propsData[res];

  const addNewEvent = (date) => {
    setData((data) => {
      if (data[res]) {
        const newdata = [...data];
        newdata[res].push({
          id: Date.now(),
          start: (date - 1) * 24 * 4,
          width: 24 * 4,
        });
        return newdata;
      }
      const newdata = [...data];
      newdata[res] = [
        { id: Date.now(), start: (date - 1) * 24 * 4, width: 24 * 4 },
      ];
      return data;
    });
  };

  const resChange = (e) => {
    e.preventDefault();

// OnDrop event shows objRes to be undefiend even though I set it's value 
// in below components span element onDrag event handler
    console.log(objRes);
  };

  return (
    <>
      <div
        className="w-full h-full relative"
        onDrop={(e) => {
          resChange(e);
        }}
        onDragOver={(e) => e.preventDefault()}
      >
        <div className="absolute w-full h-full grid grid-flow-col grid-cols-31 mt-0">
          {dates.map((date) => (
            <button
              key={date}
              className="border col-span-1 h-full py-2"
              onDoubleClickCapture={() => addNewEvent(date)}
            ></button>
          ))}
        </div>
        <div className="grid gap-2 py-2 px-0.5">
          {arr &&
            arr.map((entry, ind) => (
              <DrawEvent
                key={entry.id}
                start={entry.start}
                width={entry.width}
                objRes={{ id: entry.id, res: res }}
                setObjRes={setObjRes}
              />
            ))}
        </div>
      </div>
    </>
  );
}

function DrawEvent(props) {
  const st = (props.start * 20) / 24;
  const wi = (props.width * 20) / 24;
  const setObjRes = props.setObjRes;
  const [start, setStart] = useState(st);
  const [width, setWidth] = useState(wi);
  const [dragst, setDragSt] = useState();

  return (
    <div
      className={`relative bg-green-500 opacity-80 focus:opacity-100 hover:opacity-100 rounded-lg text-ellipsis pl-4 pr-2 py-2 whitespace-nowrap overflow-hidden z-30 group min-w-0 flex`}
      style={{ width: `${width}px`, left: `${start}px` }}
      tabIndex={0}
    >
      <button
        className="rounded bg-green-300/50 h-full w-4 hidden absolute group-hover:block group-focus:block top-0 left-0 cursor-ew-resize"
        draggable
        onDragStartCapture={(e) => {
          setDragSt(e.clientX);
        }}
        onDragEndCapture={(e) => {
          setWidth((prev) =>
            prev - e.clientX + dragst > 0 ? prev - e.clientX + dragst : 2
          );
          setStart((prev) =>
            prev + e.clientX - dragst > 0 ? prev + e.clientX - dragst : 2
          );
        }}
      >
        <span className="rounded-full bg-black h-2 w-2 hidden absolute -left-0.5 top-1/3 group-hover:block group-focus:block translate-y-1/3"></span>
      </button>
      <span
        className="w-full"
        draggable
        onDragStartCapture={(e) => {
          setDragSt(e.clientX);
        }}
        onDragStart={() => {
          setObjRes({ id: props.objRes.id, res: props.objRes.res });
        }}
        onDragEndCapture={(e) => {
          setStart((prev) =>
            prev + e.clientX - dragst > 0 ? prev + e.clientX - dragst : 2
          );
        }}
      >{`${start} from here to ${width}`}</span>
      <button
        className="rounded bg-green-300/50 h-full w-4 hidden absolute group-hover:block group-focus:block top-0 right-0 cursor-ew-resize"
        draggable
        onDragStartCapture={(e) => {
          setDragSt(e.clientX);
        }}
        onDragEndCapture={(e) => {
          setWidth((prev) =>
            prev + e.clientX - dragst > 0 ? prev + e.clientX - dragst : 2
          );
        }}
      >
        <span className="rounded-full bg-black h-2 w-2 hidden absolute -right-0.5 top-1/3 group-hover:block group-focus:block translate-y-1/3"></span>
      </button>
    </div>
  );
}

What am I missing here???