Warning message after clicking on react icon button

i have used FaEye, FaEyeSlash react icons as you can see in the below login code but every time i click on them i get the following warning message,i want that not to happen.note that i was using tailwindcss, but to fix this problem i tried using normal css.

Login.jsx

import { useContext, useState } from "react";
import { Link, Navigate } from "react-router-dom";
import axios from "axios";
import { FaEye, FaEyeSlash } from "react-icons/fa";
import { UserContext } from "../App";

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [inputType, setInputType] = useState("password");
  const [icon, setIcon] = useState(<FaEye />);
  const [success, setSuccess] = useState("");

const {state, dispatch} = useContext(UserContext);

  function handleToggle(e) {
    if (inputType === "password") {
      setInputType("text");
      setIcon(FaEyeSlash);
    } else {
      setInputType("password");
      setIcon(FaEye);
    }
  }

  function handleSubmit(e) {
    e.preventDefault();

    const user = { email, password };
    console.log(`email: ${email}, password: ${password}`);
    axios
      .post("http://localhost:5000/user/login", user)
      .then((res) =>{
        console.log(res.data.user)
        dispatch({ type: "USER",payload: {name: res.data.user, logStatus: true, identity: res.data.identity}});
        if ((res.data.identity.id === "Admin") && (res.data.identity.approved === false)){
          setSuccess(
            `${res.data.user},please wait for the Admins to approve your account!`
            );
        }else{
            setSuccess(
              `welcome ${res.data.user} you are successfully Logged in!`
            );
        }
      }
      )
      .catch((err) => {
        //console.log(`ERROR is ${err}`);
        setSuccess("Incorrect password or email");
      });
  }

  if(state.logStatus){
   return <Navigate to="/profile" state={{mes: success }} />
  }

  return (
    
    <form onSubmit={handleSubmit}>
      <div className="text-center text-lg text-red-500 font-semibold">{success}</div>
      <div className="h-auto w-5/12 border mx-auto rounded-2xl mt-3 ">
        <div className="h-2 bg-indigo-400 rounded-t-2xl mb-5 "></div>
        <div className="font-bold text-2xl text-center">Sign In</div>
        <div className="px-16">
          <div className="mt-5 ">
            <label htmlFor="email" className="block font-semibold  ">
              Email address
            </label>
            <input
              type="email"
              className="border h-5 w-full px-3 py-5 rounded-md focus:outline-2 focus:outline-blue-600"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter email"
              id="email"
              required
            />
          </div>

          <div style={{position: 'relative'}}>
            <label
              htmlFor="pass"
              className="block font-semibold mt-5"
            >
              Password
            </label>
            <input
              type={inputType}
              className="border h-5 w-full px-3 py-5 rounded-md focus:outline-2 focus:outline-blue-600"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Enter password"
              id="pass"
              required
            />
            <span style={{position: 'absolute', top:36, right:15}} onClick={handleToggle}>
              {icon}
            </span>
          </div>

          <div className="">
            <button
              type="submit"
              className="mt-5 text-white bg-blue-600 border h-10 w-full py-2 rounded-md"
            >
              Submit
            </button>
          </div>
          <div className="flex justify-around">
            <p className="mb-5 mt-3 text-left">
              New here?
              <Link to="/sign-up" className="text-blue-600">
                Register
              </Link>
            </p>
            <p className="mb-5 mt-3 text-right ">
              Forgot
              <Link to="/password-reset" className="text-blue-600">
                password?
              </Link>
            </p>
          </div>
        </div>
      </div>
    </form>
  );
}
  


export default Login;

The warning:

bundle.js:17688 Warning: Invalid values for props $$typeof, type on tag. Either remove them   from the element, or pass a string or number value to keep them in the DOM. For details, see https://reactjs.org/link/attribute-behavior
   at svg at IconBase at span at div at div at div at form at Login .svg at IconBase at span at div at div at div at form at Login (http://localhost:3000/static/js/bundle.js:3883:76 undefined)
   at RenderedRoute .RenderedRoute (http://localhost:3000/static/js/bundle.js:278126:5 undefined)
   at Routes .Routes (http://localhost:3000/static/js/bundle.js:278563:5 undefined)
   at Routing at App .Routing at App (http://localhost:3000/static/js/bundle.js:349:78 undefined)
   at Router .Router (http://localhost:3000/static/js/bundle.js:278501:15 undefined)
   at BrowserRouter .BrowserRouter (http://localhost:3000/static/js/bundle.js:276818:5 undefined)

my mistake was i forgot to put the components between the tags < and /> like this

setIcon(<FaEyeSlash />);

In the handleToggle function,that is why it was showing me that warning and that is what has worked for me.but also i can do the samething and save even the icon state from even needing it by just rendering the icon based on only inputType state.like this

<span
              className="absolute top-9 right-3.5 "
              onClick={handleToggle}
            >
              { inputType === "password"? <FaEye /> : <FaEyeSlash /> }
            </span>