DragDropContext not working: useId is not a function

[willgart]

Hi,

I'm not able to implement DND into a PCF React control, while I can use it in a standalone React application.
I'm migrating a working React app into a PCF control to use inside Dynamics CRM.
and there I have the issue. the control failed to render and crash my cpntrol.

in the console I have this:

dnd.esm.js:6075 
 Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...).useId is not a function

here the subset of my test code, a component displaying the DragDropContext

    return (
        <div>
            <DragDropContext onDragEnd={onDragEnd} key="kanban1">
                <div key="divkan1"></div>
            </DragDropContext>
        </div>
    );

the error come from this line:

function useUniqueContextId() {
  return React.useId();
}

Expected behavior

React page rendered properly

Actual behavior

Error generated
Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...).useId is not a function

Steps to reproduce

create a PCF control (React control for power platform)
add dnd and try to implement a DragDropContext
(my solution is more advanced than just adding the DragDropContext control in my components, but it's the only component failing)

Suggested solution?

not for now.

What version of React are you using?

"react": "^18.3.1",

What version of @hello-pangea/dnd are you running?

"@hello-pangea/dnd": "^18.0.1",
but I tried the version 17 too, same problem.

What browser are you using?

Edge and Chrome, same problem.

Demo

not available yet.

[willgart]

I was able to reproduce the problem without DND.

React.useId() is not working at all in my PCF control.
I just pout this line in my control:
const test = React.useId();
and it's failing.

but if I use the useId from the react component library instead of React

import { useId } from '@fluentui/react-components';
const test = useId();

the error disappear in my reprod (without DND)
but I don't know if it's functionaly equivalent or not.