ReactJS – Passing a component as a return

Im using React, useState and React-Icons.

My intention is to create a dropdown menu (without Bootstrap). I want to change the icon when clicked (to init the function) but the output is the raw SVG details. Any ideas?

import { IoMdArrowDropdownCircle, IoMdArrowDropupCircle } from "react-icons/io";

function navBar() {
  const navToggle = () => {
    const [navMenuToggle, changeNavToggle] = useState(true);
    return navMenuToggle ? (
      <IoMdArrowDropdownCircle />
    ) : (
      <IoMdArrowDropupCircle />
    );
    changeNavToggle(false);
  };

<div className="tableIcon" id="navDropdown" onClick={navToggle}>
  <IoMdArrowDropdownCircle />
</div>