The code works mostly fine but I get a warning about not using forwardRefs. Is there a proper alternative to write this so that the warning is suppressed?

```jsx
"use client";
import {
Breadcrumb,
BreadcrumbItem,
Grid,
Column,
} from "@carbon/react";
import { useRef, useState, useEffect } from "react";
import { useCountUp } from "react-countup";
import { getUsers } from "@/../lib";

export default function LandingPage() {
const [realData, setRealData] = useState([])

useEffect(() => {
getUsers().then((data) => {
setRealData(data)
userCountUp.update(data.length)
})
}, [])

const userCountUpRef = useRef(null)
const userCountUp = useCountUp({
ref: userCountUpRef,
end: realData.length
})

const roleCountUpRef = useRef(null)
const roleCountUp = useCountUp({
ref: roleCountUpRef,
end: realData.length
})

const permissionCountUpRef = useRef(null)
const permissionCountUp = useCountUp({
ref: permissionCountUpRef,
end: realData.length
})

const applicationCountUpRef = useRef(null)
const applicationCountUp = useCountUp({
ref: applicationCountUpRef,
end: realData.length
})

return (




Dashboard

Manage your organization with the Identity & Access Manager

);
}
```

This is the full error for reference:
```
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(LinkComponent)`.
HeaderName@webpack-internal:///(app-pages-browser)/./node_modules/@carbon/react/es/components/UIShell/HeaderName.js:34:7
LinkComponent@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/link.js:121:254
header
Header@webpack-internal:///(app-pages-browser)/./node_modules/@carbon/react/es/components/UIShell/Header.js:33:7
render@webpack-internal:///(app-pages-browser)/./src/components/AppHeader/AppHeader.tsx:14:63
HeaderContainer@webpack-internal:///(app-pages-browser)/./node_modules/@carbon/react/es/components/UIShell/HeaderContainer.js:32:7
AppHeader
div
Theme@webpack-internal:///(app-pages-browser)/./node_modules/@carbon/react/es/components/Theme/index.js:74:7
div
Providers@webpack-internal:///(app-pages-browser)/./src/app/providers.jsx:12:24
body
html
RootLayout (Server)
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:134
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:24
```