How do fix the Warning:: " validateDOMNesting(...): <div> cannot appear as a descendant of <p> at div " when using react-simple-keyboard package?

Question

In my react application I use the react-simple-keyboard package to render the keyboard interface to user. When the component which uses the package renders to the DOM, Thefollowing errror appearing in console:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    at div
    at l (webpack-internal:///(app-pages-browser)/./node_modules/react-simple-keyboard/build/index.js:12:107954)
    at p
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:316:28)
    at _c7 (webpack-internal:///(app-pages-browser)/./components/ui/dialog.tsx:138:11)
    at div
    at DialogHeader (webpack-internal:///(app-pages-browser)/./components/ui/dialog.tsx:98:11)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs:44:42)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-focus-scope/dist/index.mjs:32:19)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:274:28)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:206:102)
    at $921a889cee6df7e8$export$99c2b779aa4e8b8b (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-presence/dist/index.mjs:28:22)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:191:108)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-portal/dist/index.mjs:24:24)
    at $921a889cee6df7e8$export$99c2b779aa4e8b8b (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-presence/dist/index.mjs:28:22)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-context/dist/index.mjs:47:28)
    at $5d3850c4d0b4e6c7$export$dad7c95542bacce0 (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:133:28)
    at _c1 (webpack-internal:///(app-pages-browser)/./components/ui/dialog.tsx:44:11)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-context/dist/index.mjs:47:28)
    at $5d3850c4d0b4e6c7$export$3ddf2d174ce01153 (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dialog/dist/index.mjs:77:28)
    at MobileNumberModal (webpack-internal:///(app-pages-browser)/./components/mobilenumber-modal.tsx:31:102)
    at ModalProvider (webpack-internal:///(app-pages-browser)/./components/modal-provider.tsx:17:82)
    at RecoilRoot_INTERNAL (webpack-internal:///(app-pages-browser)/./node_modules/recoil/es/index.js:4472:3)
    at RecoilRoot (webpack-internal:///(app-pages-browser)/./node_modules/recoil/es/index.js:4638:5)
    at main
    at div
    at StudioLayouts (webpack-internal:///(app-pages-browser)/./app/(studio)/layout.tsx:16:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:315:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:325:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:295:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:159:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:436:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:11)

I want to get rid from the above warning message as it is so annoying while I develop.

I have explored to debug the issue and I found this warning is definitely coming from react-simple-keyboard package.

POINT 1 :

In my component I have below keyboard component from react-simple-keyboard npm package as mentioned below: If I remove this, the warning get removed.

.
.
.
import "react-simple-keyboard/build/css/index.css";
import Keyboard, { SimpleKeyboard } from "react-simple-keyboard";
.
.
.

   <Keyboard
              onChange={onChange}
              mergeDisplay={true}
              physicalKeyboardHighlight={true}
              keyboardRef={(r) => (keyboardRef.current = r)}
              maxLength={10}
              layout={{
                default: ["1 2 3", "4 5 6", "7 8 9", " 0 ", "{bksp}"],
                shift: ["! / #", "$ % ^", "& * (", "{shift} ) +", "{bksp}"],
              }}
              display={{
                '{bksp}': 'Backspace',
              }}
            />
.
.
.

POINT: 2:

In my console, I decided to print the elements using the below querySelector:

document.querySelectorAll(" p * div ")

It Provides the below list of elements which all are belongs to the keyboard component from react-simple-keyboard npm package.