ForwardRef error when using Icon in react +chakra u

Question

My goal is to get this code (or some variation of it) to work in the latest version of Chakra UI. The app.tsx react file below runs but gives me a forwardRef() warning

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
                        style={{ marginTop: 6, marginLeft: 4 }}
                        fontSize="2xl"
                        color="gray.500"
                        key={item["key"]}
                    >
                        {item["icon"]}
                    </Icon>
                ))}
            </HStack>
        </>
    );
};

export default App;

This is the warning I see in the console:

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 chakra(svg). Error Component Stack:
    at FaWindows (<anonymous>)
    at chunk-CAUEBMDW.js?v=7ed824e2:1701:47
    at chunk-YTE2HKJK.js?v=7ed824e2:66:32
    at div (<anonymous>)
    at chunk-CAUEBMDW.js?v=7ed824e2:1701:47
    at Stack2 (@chakra-ui_react.js?v=7ed824e2:40843:7)
    at HStack2 (<anonymous>)
    at App (<anonymous>)
    at J (next-themes.js?v=7ed824e2:42:18)
    at ColorModeProvider (<anonymous>)
    at _ (next-themes.js?v=7ed824e2:44:25)
    at J (next-themes.js?v=7ed824e2:42:18)
    at ColorModeProvider (<anonymous>)
    at ChakraProvider (chunk-CAUEBMDW.js?v=7ed824e2:2342:18)
    at Provider (<anonymous>)

How do I modify the above code to eliminate the warning? I have gone through a few web pages but couldn't address my issue. The app.tsx is a condensed version of the code I found at this link: https://chakra-templates.vercel.app/navigation/sidebar

I am following a React tutorial from CodeWithMosh, but the tutorial is abou 2yrs old, and it uses an older version of chakra-ui

Answer 1

Building on nxtman123 suggestion, replacing the Icon component with a Box component addressed the issue

import { HStack, Box } from "@chakra-ui/react";

import {
    FaWindows,
    FaPlaystation,
    FaXbox,
    FaApple,
    FaLinux,
    FaAndroid,
} from "react-icons/fa";

const LinkItems = [
    { key: "windows", iconType: FaWindows },
    { key: "playstation", iconType: FaPlaystation },
    { key: "xbox", iconType: FaXbox },
    { key: "apple", iconType: FaApple },
    { key: "linux", iconType: FaLinux },
    { key: "android", iconType: FaAndroid },
];
const App = () => {
    return (
        <>
            <HStack>
                {LinkItems.map((item) => (
                    <Box
                        as={item.iconType}
                        key={item.key}
                        fontSize="2xl"
                        color="gray.500"
                        mt={1.5}
                        ml={1}
                    />
                ))}
            </HStack>
        </>
    );
};

export default App;

Answer 2

In Chakra UI 2 the Icon component uses the as prop with third party libraries. So you might give this a try:

const LinkItems = [ // not instantiating components here
    { 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"]}
                        style={{ marginTop: 6, marginLeft: 4 }}
                        fontSize="2xl"
                        color="gray.500"
                        key={item["key"]}
                    />
                ))}
            </HStack>
        </>
    );
};