How to integrate react DnD with react fullcalendar?
You can integrate fullcalendar and react-dnd using the ThirdPartyDraggable interface provided by fullcalendar (docs).
However, it is important to notice that fullcalendar reacts to mouse events to implement its drag and drop. react-dnd provides the a html5-backend, but they don't play together nicely as the HTML5 Drag and Drop API disables mouse events in favour of drag events.
You should thus use an alternative backend that uses those mouse events. E.g. this one.
I implemented a sandbox with an example implementation.
for the record, hooks (which React is about in functional components) cannot be used in class-based components (https://reactjs.org/warnings/invalid-hook-call-warning.html).
You might want to consider rewriting your Card and Box as RFCs instead of RCCs.