[Vue warn]: Invalid VNode type ocurred when i try to add react icons to components in vue3

Question

How can I create a sidebar in my Vue.js app with a right arrow icon using React icons? Here is the HTML code that I have so far:

<template>
    <div class="flex">
        <div class="bg-side-bar h-screen w-72 pt-8">
            <FiArrowRightCircle/>
        </div>
        <div class="p-7 "><h1 class="text-2xl">home</h1></div>
    </div>
</template>

I am using the following JavaScript code:

<script setup>
    import { FiArrowRightCircle } from "react-icons/fi";
</script>

However, I am getting an warning message:

[Vue warn]: Invalid VNode type: ƒ IconBase(props) {
  var elem = function(conf) {
    var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
    var computedSize = size || … (function) 
  at <FiArrowRightCircle> 
  at <SideBar> 
  at <App>

The page appears to be running correctly with no error pages, but the icon is not showing up on the page.