[BUG] whileInView transition values override the other transition values

[OSAMA263]

im trying to animate whileHover on a div opacity :[0,1]

what i want:

if i hover on the div the opacity goes from 0 to 1 it works if i hoverd and stayed on the div but..

what happens:

if i ran the mouse on the div fast the delay:3 works but i dont want the whileInView delay value to work if i hoverd on the div

import { motion} from "framer-motion";

export const App= () => {
  return (
    <>
      <motion.div
        style={{ background: "black", marginTop: 10 }}
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1, transition: { duration: 0.4, delay: 3 } }}
        whileHover={{
          opacity: [0, 1],
          transition: { duration: 0.3, delay: 0 },
        }}
      >
        text
      </motion.div>
    </>
  );
};

https://codesandbox.io/p/devbox/crazy-euler-4flt8c