react-draggable | React draggable component | Frontend Framework library

I am trying to drag a component whose css has transform animation. But it could not work. The component just move according to animation and could not be dragged. Is there any way to achieve the drag function?

I want to use a ref for my elements, but I get an error and I don't know how to fix it.

I want to dynamically change Popper position on the screen with react-draggable.

Here's my code:

I think it's mainly an issue with my reducer function but basically I'm trying to add and delete components. Adding works fine. Deleting doesn't work correctly. I put a console log in the onClick when I create a new component and it shows unique ids but it seems like it's not getting passed correctly into the reducer or something. If anyone has any ideas, I'm all ears.

Reducer function

I am trying to build react prod docker container with Azure DevOps pipelines. After I upgrade my build environment and code, Pipeline failed. After some research I add "--node-flags --max-old-space-size=8192" statement my build command. But it didn't matter. I also try tried relevant node containers for a build, it didn't work.

I have a react app and I am trying to write a css rule like the following using styled components:

I am trying to create a draggable Material UI dialog which includes in its contents an Autocomplete component. The result should look something like the following:

The desktop experience here is that when one drags the dialog (by grabbing the title area), the text field loses focus, and so the options Popper immediately disappears. However, the touch experience (tested iPhone 6 and iPad 7) is broken in that the text field remains focused while dragging, and so the popper doesn't disappear but also doesn't drag with the dialog:

Notice as a further weirdness that the text cursor (circled) lines up with the text field every time the dialog is grabbed but then does not move while the dragging is happening (this bug exhibits even without Autocomplete, so maybe beyond the scope of this question, but thought I'd mention for completeness).

I think I understand why this is happening: The popper is a child of body in the DOM and not the draggable Paper element, so it isn't being targeted the way one would naively hope. However, the fact remains that it is happening, and I would like a way to fix it, if possible.

Note that a bug has been filed here.

Code below:

I'm trying to make a collaborative whiteboard, where multiple clients connect to the server and each can see what everyone is drawing on the board. The way that it is run is first you have to type in the terminal node server.js to execute the server.js file, which runs on localhost:5000. After that you open a new terminal and then type npm start and it opens the React app on localhost:3000. Now the problem is that my other device tells me GET http://localhost:5000/user net:ERR_CONNECTION_REFUSED when I click on inspect. This is the link to show me JSON data of pictures from the MySQL database. So I cannot see pictures from the database on the whiteboard on different devices. Only on my own device. But the weird thing is that I can only see the JSON data when I explicitly type the IP address and then the port and /user in a different tab. But on the whiteboard itself, it tells me this error and shows me no pictures from the database.

This is the server.js code:

I am using react-resizable , I create a demo based on the demo code here: