diff --git a/.changeset/sharp-years-raise.md b/.changeset/sharp-years-raise.md
new file mode 100644
index 0000000000..5db5d5e71c
--- /dev/null
+++ b/.changeset/sharp-years-raise.md
@@ -0,0 +1,9 @@
+---
+"@nextui-org/dropdown": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+---
+
+Fix forwardRef render functions not using ref
diff --git a/packages/components/dropdown/src/dropdown-trigger.tsx b/packages/components/dropdown/src/dropdown-trigger.tsx
index 5217e188d3..467270085f 100644
--- a/packages/components/dropdown/src/dropdown-trigger.tsx
+++ b/packages/components/dropdown/src/dropdown-trigger.tsx
@@ -1,4 +1,3 @@
-import {forwardRef} from "@nextui-org/system";
import {PopoverTrigger} from "@nextui-org/popover";
import {useDropdownContext} from "./dropdown-context";
@@ -11,13 +10,13 @@ export interface DropdownTriggerProps {
* DropdownTrigger opens the popover's content. It must be an interactive element
* such as `button` or `a`.
*/
-const DropdownTrigger = forwardRef<"button", DropdownTriggerProps>((props, _) => {
+const DropdownTrigger = (props: DropdownTriggerProps) => {
const {getMenuTriggerProps} = useDropdownContext();
const {children, ...otherProps} = props;
return {children};
-});
+};
DropdownTrigger.displayName = "NextUI.DropdownTrigger";
diff --git a/packages/components/listbox/src/listbox-item.tsx b/packages/components/listbox/src/listbox-item.tsx
index bf624a9e3b..8e9dc351e2 100644
--- a/packages/components/listbox/src/listbox-item.tsx
+++ b/packages/components/listbox/src/listbox-item.tsx
@@ -1,5 +1,4 @@
import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
import {UseListboxItemProps, useListboxItem} from "./use-listbox-item";
import {ListboxSelectedIcon} from "./listbox-selected-icon";
@@ -9,7 +8,7 @@ export interface ListboxItemProps extends UseListboxI
/**
* @internal
*/
-const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
+const ListboxItem = (props: ListboxItemProps) => {
const {
Component,
FragmentWrapper,
@@ -64,7 +63,7 @@ const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
);
-});
+};
ListboxItem.displayName = "NextUI.ListboxItem";
diff --git a/packages/components/menu/src/menu-item.tsx b/packages/components/menu/src/menu-item.tsx
index ac05b98aa9..fa5a6f2c19 100644
--- a/packages/components/menu/src/menu-item.tsx
+++ b/packages/components/menu/src/menu-item.tsx
@@ -1,6 +1,4 @@
import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
-import * as React from "react";
import {UseMenuItemProps, useMenuItem} from "./use-menu-item";
import {MenuSelectedIcon} from "./menu-selected-icon";
@@ -10,7 +8,7 @@ export interface MenuItemProps extends UseMenuItemPro
/**
* @internal
*/
-const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
+const MenuItem = (props: MenuItemProps) => {
const {
Component,
FragmentWrapper,
@@ -69,7 +67,7 @@ const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
);
-});
+};
MenuItem.displayName = "NextUI.MenuItem";
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 9940e62d42..42239327fd 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -2,7 +2,6 @@ import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {cloneElement, isValidElement, ReactNode, useMemo, useCallback} from "react";
-import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
import {CloseIcon} from "@nextui-org/shared-icons";
@@ -23,7 +22,7 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
-const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
+const ModalContent = (props: ModalContentProps) => {
const {as, children, role = "dialog", ...otherProps} = props;
const {
@@ -139,7 +138,7 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
{contents}
);
-});
+};
ModalContent.displayName = "NextUI.ModalContent";
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 91a660e50b..7f36c6fb78 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -2,7 +2,6 @@ import type {AriaDialogProps} from "@react-aria/dialog";
import type {HTMLMotionProps} from "framer-motion";
import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
-import {forwardRef} from "@nextui-org/system";
import {RemoveScroll} from "react-remove-scroll";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -21,7 +20,7 @@ export interface PopoverContentProps
const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
-const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
+const PopoverContent = (props: PopoverContentProps) => {
const {as, children, className, ...otherProps} = props;
const {
@@ -113,7 +112,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
{contents}
);
-});
+};
PopoverContent.displayName = "NextUI.PopoverContent";
diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx
index 8c78d3de06..16c6fe0b43 100644
--- a/packages/components/popover/src/popover-trigger.tsx
+++ b/packages/components/popover/src/popover-trigger.tsx
@@ -1,5 +1,4 @@
import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef} from "@nextui-org/system";
import {pickChildren} from "@nextui-org/react-utils";
import {useAriaButton} from "@nextui-org/use-aria-button";
import {Button} from "@nextui-org/button";
@@ -15,7 +14,7 @@ export interface PopoverTriggerProps {
* PopoverTrigger opens the popover's content. It must be an interactive element
* such as `button` or `a`.
*/
-const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
+const PopoverTrigger = (props: PopoverTriggerProps) => {
const {triggerRef, getTriggerProps} = usePopoverContext();
const {children, ...otherProps} = props;
@@ -50,7 +49,7 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
child,
mergeProps(restProps, hasNextUIButton ? {onPress, isDisabled} : buttonProps),
);
-});
+};
PopoverTrigger.displayName = "NextUI.PopoverTrigger";