ForwardRef Error When Using Icon in React + Chakra UI

The issue occurs because we are directly passing an (which is an element) inside the component from Chakra UI. The Chakra Icon component is meant to wrap icon components (not elements), and it automatically applies styles and props correctly, including ref forwarding.

Instead of wrapping the icon elements inside , pass the icon components (without rendering them as JSX) and let Chakra’s Icon component handle rendering.

Modify the LinkItems array to store references to the icon components (without the JSX brackets).

Here’s the corrected code:

import { HStack, Icon } from "@chakra-ui/react";
import { FaWindows, FaPlaystation, FaXbox, FaApple, FaLinux, FaAndroid } from "react-icons/fa";

const LinkItems = [
    { key: "windows", icon: FaWindows },
    { key: "playstation", icon: FaPlaystation },
    { key: "xbox", icon: FaXbox },
    { key: "apple", icon: FaApple },
    { key: "linux", icon: FaLinux },
    { key: "android", icon: FaAndroid },
];

const App = () => {
    return (
        <HStack>
            {LinkItems.map((item) => (
                <Icon
                    as={item.icon}  //  Pass the component reference instead of JSX
                    fontSize="2xl"
                    color="gray.500"
                    key={item.key}
                    mt={1.5}  // Use Chakra's `mt` instead of inline `marginTop`
                    ml={1}    // Use Chakra's `ml` instead of inline `marginLeft`
                />
            ))}
        </HStack>
    );
};

export default App;

Also Read:

React Performance

• Instead of { icon: }, we now use { icon: FaWindows } (without JSX).
• The as prop in tells Chakra UI to use the given component (FaWindows, FaPlaystation, etc.).
• Chakra UI’s Icon component can properly forward refs when given a component instead of an already rendered JSX element.

This will eliminate the forwardRef() warning while ensuring proper styling and behavior.

Below package.json file is for version matching.