diff --git a/docs-site/vite.config.js b/docs-site/vite.config.js
index 081c8d9f6..d596c6f20 100644
--- a/docs-site/vite.config.js
+++ b/docs-site/vite.config.js
@@ -1,6 +1,17 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      // Ensure single React instance to avoid "Invalid hook call" errors
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+    },
+  },
 });
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index 00c015103..966389357 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -910,55 +910,55 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.6.0":
-  version: 1.6.9
-  resolution: "@floating-ui/core@npm:1.6.9"
+"@floating-ui/core@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/core@npm:1.7.3"
   dependencies:
-    "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0":
-  version: 1.6.13
-  resolution: "@floating-ui/dom@npm:1.6.13"
+"@floating-ui/dom@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/dom@npm:1.7.3"
   dependencies:
-    "@floating-ui/core": "npm:^1.6.0"
-    "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+    "@floating-ui/core": "npm:^1.7.3"
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "@floating-ui/react-dom@npm:2.1.2"
+"@floating-ui/react-dom@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "@floating-ui/react-dom@npm:2.1.5"
   dependencies:
-    "@floating-ui/dom": "npm:^1.0.0"
+    "@floating-ui/dom": "npm:^1.7.3"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60
+  checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:^0.27.3":
-  version: 0.27.3
-  resolution: "@floating-ui/react@npm:0.27.3"
+"@floating-ui/react@npm:^0.27.15":
+  version: 0.27.15
+  resolution: "@floating-ui/react@npm:0.27.15"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.1.2"
-    "@floating-ui/utils": "npm:^0.2.9"
+    "@floating-ui/react-dom": "npm:^2.1.5"
+    "@floating-ui/utils": "npm:^0.2.10"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=17.0.0"
     react-dom: ">=17.0.0"
-  checksum: 10c0/9ebc4e82af905cfafeb5cde1dfbc15a2541d4eaaf1e13fb6b8acbb9f0c3535a7c331b8dee3ab5bb03acb21716ee2ab155629a6c14c3227cf959bf8ad92594539
+  checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.9":
-  version: 0.2.9
-  resolution: "@floating-ui/utils@npm:0.2.9"
-  checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
+"@floating-ui/utils@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "@floating-ui/utils@npm:0.2.10"
+  checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
   languageName: node
   linkType: hard
 
@@ -4593,7 +4593,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-datepicker@portal:../::locator=react-datepicker-docs%40workspace%3A."
   dependencies:
-    "@floating-ui/react": "npm:^0.27.3"
+    "@floating-ui/react": "npm:^0.27.15"
     clsx: "npm:^2.1.1"
     date-fns: "npm:^4.1.0"
   peerDependencies:
diff --git a/package.json b/package.json
index fb8b2babf..3f3cd4fcf 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.3",
+    "@floating-ui/react": "^0.27.15",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0"
   },
diff --git a/src/popper_component.tsx b/src/popper_component.tsx
index 28ea745e1..dafcdd46d 100644
--- a/src/popper_component.tsx
+++ b/src/popper_component.tsx
@@ -1,6 +1,6 @@
 import { FloatingArrow } from "@floating-ui/react";
 import { clsx } from "clsx";
-import React, { createElement, Component } from "react";
+import React, { createElement } from "react";
 
 import Portal from "./portal";
 import TabLoop from "./tab_loop";
@@ -29,82 +29,74 @@ interface PopperComponentProps
 }
 
 // Exported for testing purposes
-export class PopperComponent extends Component<PopperComponentProps> {
-  static get defaultProps() {
-    return {
-      hidePopper: true,
-    };
-  }
-
-  render(): React.ReactElement {
-    const {
-      className,
-      wrapperClassName,
-      hidePopper = PopperComponent.defaultProps.hidePopper,
-      popperComponent,
-      targetComponent,
-      enableTabLoop,
-      popperOnKeyDown,
-      portalId,
-      portalHost,
-      popperProps,
-      showArrow,
-    } = this.props;
-
-    let popper: React.ReactElement | undefined = undefined;
+export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
+  const {
+    className,
+    wrapperClassName,
+    hidePopper = true,
+    popperComponent,
+    targetComponent,
+    enableTabLoop,
+    popperOnKeyDown,
+    portalId,
+    portalHost,
+    popperProps,
+    showArrow,
+  } = props;
 
-    if (!hidePopper) {
-      const classes = clsx("react-datepicker-popper", className);
-      popper = (
-        <TabLoop enableTabLoop={enableTabLoop}>
-          <div
-            ref={popperProps.refs.setFloating}
-            style={popperProps.floatingStyles}
-            className={classes}
-            data-placement={popperProps.placement}
-            onKeyDown={popperOnKeyDown}
-          >
-            {popperComponent}
-            {showArrow && (
-              <FloatingArrow
-                ref={popperProps.arrowRef}
-                context={popperProps.context}
-                fill="currentColor"
-                strokeWidth={1}
-                height={8}
-                width={16}
-                style={{ transform: "translateY(-1px)" }}
-                className="react-datepicker__triangle"
-              />
-            )}
-          </div>
-        </TabLoop>
-      );
-    }
+  let popper: React.ReactElement | undefined = undefined;
 
-    if (this.props.popperContainer) {
-      popper = createElement(this.props.popperContainer, {}, popper);
-    }
-
-    if (portalId && !hidePopper) {
-      popper = (
-        <Portal portalId={portalId} portalHost={portalHost}>
-          {popper}
-        </Portal>
-      );
-    }
+  if (!hidePopper) {
+    const classes = clsx("react-datepicker-popper", className);
+    popper = (
+      <TabLoop enableTabLoop={enableTabLoop}>
+        <div
+          ref={popperProps.refs.setFloating}
+          style={popperProps.floatingStyles}
+          className={classes}
+          data-placement={popperProps.placement}
+          onKeyDown={popperOnKeyDown}
+        >
+          {popperComponent}
+          {showArrow && (
+            <FloatingArrow
+              ref={popperProps.arrowRef}
+              context={popperProps.context}
+              fill="currentColor"
+              strokeWidth={1}
+              height={8}
+              width={16}
+              style={{ transform: "translateY(-1px)" }}
+              className="react-datepicker__triangle"
+            />
+          )}
+        </div>
+      </TabLoop>
+    );
+  }
 
-    const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
+  if (props.popperContainer) {
+    popper = createElement(props.popperContainer, {}, popper);
+  }
 
-    return (
-      <>
-        <div ref={popperProps.refs.setReference} className={wrapperClasses}>
-          {targetComponent}
-        </div>
+  if (portalId && !hidePopper) {
+    popper = (
+      <Portal portalId={portalId} portalHost={portalHost}>
         {popper}
-      </>
+      </Portal>
     );
   }
-}
+
+  const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
+
+  return (
+    <>
+      <div ref={popperProps.refs.setReference} className={wrapperClasses}>
+        {targetComponent}
+      </div>
+      {popper}
+    </>
+  );
+};
 
 export default withFloating<PopperComponentProps>(PopperComponent);
diff --git a/src/with_floating.tsx b/src/with_floating.tsx
index 7635cc664..f860a1a16 100644
--- a/src/with_floating.tsx
+++ b/src/with_floating.tsx
@@ -45,10 +45,10 @@ export default function withFloating<T extends FloatingProps>(
   Component: React.ComponentType<T>,
 ) {
   type R = Omit<T, "popperProps"> & WithFloatingProps;
-  const WithFloating: React.FC<R> = (props): React.ReactElement => {
+  function WithFloating(props: R): React.ReactElement {
     const hidePopper: boolean =
       typeof props.hidePopper === "boolean" ? props.hidePopper : true;
-    const arrowRef: React.RefObject<HTMLElement | null> = useRef(null);
+    const arrowRef = useRef<SVGSVGElement>(null);
     const floatingProps = useFloating({
       open: !hidePopper,
       whileElementsMounted: autoUpdate,
@@ -69,7 +69,9 @@ export default function withFloating<T extends FloatingProps>(
     } as unknown as T;
 
     return <Component {...componentProps} />;
-  };
+  }
+
+  WithFloating.displayName = `withFloating(${Component.displayName || Component.name || "Component"})`;
 
   return WithFloating;
 }
diff --git a/yarn.lock b/yarn.lock
index 72c83390a..12745ae70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1972,55 +1972,55 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.6.0":
-  version: 1.6.9
-  resolution: "@floating-ui/core@npm:1.6.9"
+"@floating-ui/core@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/core@npm:1.7.3"
   dependencies:
-    "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0":
-  version: 1.6.13
-  resolution: "@floating-ui/dom@npm:1.6.13"
+"@floating-ui/dom@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/dom@npm:1.7.3"
   dependencies:
-    "@floating-ui/core": "npm:^1.6.0"
-    "@floating-ui/utils": "npm:^0.2.9"
-  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+    "@floating-ui/core": "npm:^1.7.3"
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.1.3":
-  version: 2.1.3
-  resolution: "@floating-ui/react-dom@npm:2.1.3"
+"@floating-ui/react-dom@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "@floating-ui/react-dom@npm:2.1.5"
   dependencies:
-    "@floating-ui/dom": "npm:^1.0.0"
+    "@floating-ui/dom": "npm:^1.7.3"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/e88750ea2fb352264d52d502d3979f94155ce2c8ab9a50862810d0cfc8c8e49cb6bbde466d668736cb38624d089360ef97451397b647408a0eb2c1870234c19a
+  checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:^0.27.3":
-  version: 0.27.12
-  resolution: "@floating-ui/react@npm:0.27.12"
+"@floating-ui/react@npm:^0.27.15":
+  version: 0.27.15
+  resolution: "@floating-ui/react@npm:0.27.15"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.1.3"
-    "@floating-ui/utils": "npm:^0.2.9"
+    "@floating-ui/react-dom": "npm:^2.1.5"
+    "@floating-ui/utils": "npm:^0.2.10"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=17.0.0"
     react-dom: ">=17.0.0"
-  checksum: 10c0/da453965074bd4ded8e3de97ceb2c0833df8df2ecd9eff5ae4d336413443ea5abde5c9e37b092956901b97e7b47f9138d51d4896fa82da68e77eb0090289bf64
+  checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.9":
-  version: 0.2.9
-  resolution: "@floating-ui/utils@npm:0.2.9"
-  checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
+"@floating-ui/utils@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "@floating-ui/utils@npm:0.2.10"
+  checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
   languageName: node
   linkType: hard
 
@@ -9464,7 +9464,7 @@ __metadata:
     "@babel/preset-react": "npm:^7.26.3"
     "@babel/preset-typescript": "npm:^7.26.0"
     "@eslint/js": "npm:^9.19.0"
-    "@floating-ui/react": "npm:^0.27.3"
+    "@floating-ui/react": "npm:^0.27.15"
     "@react-docgen/cli": "npm:^3.0.0"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@rollup/plugin-commonjs": "npm:^28.0.2"