Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[codewriter3000]

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?

"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 (
    <Grid className="landing-page" fullWidth>
      <Column lg={16} md={8} sm={4} className="landing-page__banner">
        <Breadcrumb noTrailingSlash aria-label="Page navigation">
          <BreadcrumbItem>
            <a href="/">Dashboard</a>
          </BreadcrumbItem>
        </Breadcrumb>
        <h1 className="landing-page__heading">
          Manage your organization with the Identity & Access Manager
        </h1>
      </Column>
      <Column className="mt-6 mb-4" lg={16} md={8} sm={4}>
        <div className="grid grid-cols-3 gap-4 mt-4">
          <div>
            <h2 className="metric">
              <span ref={userCountUpRef} />
            </h2>
            <p>Users</p>
          </div>
          <div>
            <h2 className="metric">
              <span ref={roleCountUpRef} />
            </h2>
            <p>Roles</p>
          </div>
          <div>
            <h2 className="metric">
              <span ref={permissionCountUpRef} />
            </h2>
            <p>Permissions</p>
          </div>
          <div>
            <h2 className="metric">
                <span ref={applicationCountUpRef} />
            </h2>
            <p>Applications</p>
          </div>
        </div>
      </Column>
    </Grid>
  );
}

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