I need a help. I am making a component using react Avatar (Material MUI - v5). Initially, user profile avatar will be shown and when hovered over it then Edition will appear above user profile avatar and at the same time profile will be grayed out (sort of its opacity goes to 0.5). I have solved it using react state hook. Is there a way to solve it using css (not external css file !!!). This is my code.

import Avatar from "@mui/material/Avatar";
import IconButton from "@mui/material/IconButton";
import EditIcon from "@mui/icons-material/Edit";
import { useState } from "react";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
const UserProfileCard = ({ imgUrl, uploadIconColor }) => {
  const [opacity, setOpacity] = useState(1);
  const onMouseEnterHandle = () => {
    setOpacity(0.3);
  };
  const onMouseLeaveHandle = () => {
    setOpacity(1);
  };
  return (
    <>
      <IconButton
        sx={{
          position: "absolute",
          "&:hover": {
            opacity: opacity,
            transition: "opacity 0.5s",
          },
          opacity: opacity,
          transition: "opacity 0.5s",
        }}
      >
        <Avatar src={imgUrl ? imgUrl : "/static/images/boy.jpg"} alt="User profile">
          {" "}
        </Avatar>
      </IconButton>
      <IconButton
        onMouseEnter={onMouseEnterHandle}
        onMouseLeave={onMouseLeaveHandle}
        sx={{
          opacity: 0,
          "&:hover": {
            opacity: 1,
            transition: "opacity 0.5s",
          },
        }}
      >
        <Avatar
          sx={{
            backgroundColor: "transparent",
          }}
        >
          <EditIcon
            sx={{
              color: uploadIconColor ? uploadIconColor : "#5B5B5B",
              position: "relative",
            }}
          />
        </Avatar>
      </IconButton>
    </>
  );
};
export default UserProfileCard;