react-svg library and styles are not applied

Question

I have used the "react-svg" library to display SVG icons because I wanted to enter the address of the icon directly, but the problem is that I cannot implement my styles on the icon, like I want the size and change the color of the icon. I also want to change the color of the icon when the user hovers over it. Can I do this with this library? How? My codes:

myIcon.jsx

import { ReactSVG } from "react-svg";
import PropTypes from "prop-types";

const MyIcon = ({ icon, size, color }) => {
  const iconPath = `./src/assets/icons/${icon}.svg`;
  const styles = {
    width: size ? size : "70px",
    height: size ? size : "70px",
    fill: color,
  };
 
  return <ReactSVG src={iconPath} style={styles} />;
};
export default MyIcon;

MyIcon.propTypes = {
  icon: PropTypes.string.isRequired,
  size: PropTypes.string,
  color: PropTypes.string,
};

footer.jsx

<MyIcon
   icon="facebook"
   size="56"
   className="hover:fill-red-800"
   color="blue"
 />