Reactjs – React does not recognize the dataSlot prop warning with React Icons

Warning: React does not recognize the dataSlot prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dataslot instead. If you accidentally passed it from a parent component, remove it from the DOM element.

import React, { useState } from "react";
import logo from "../assets/images/logo.png";
import { HiMoon, HiSun } from "react-icons/hi2";

function Header() {
    const [isMoon, setIsMoon] = useState(true);

    // Function to toggle between moon and sun
    const toggleTheme = () => {
        setIsMoon((prevIsMoon) => !prevIsMoon);
    };

    return (
        <div className="flex items-center">
            <img src={logo} width={90} height={90} alt="Logo" />
            <div className="flex bg-slate-200 p-2 w-full mx-5 rounded-full items-center">
                <input
                    type="text"
                    placeholder="Search Games"
                    className="bg-transparent outline-none"
                />
            </div>
            <div onClick={toggleTheme}>
                {isMoon ? (
                    <HiMoon className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer" />
                ) : (
                    <HiSun className="text-[35px] bg-slate-200 text-black p-1 rounded-full cursor-pointer" />
                )}
            </div>
        </div>
    );
}

export default Header;