How to replace a div with another div after hovering first div in react js (and vice-versa)

#react #css #javascript #vite

import React, { useState } from 'react';

function App() {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovered(true);
  };

  const handleLeave = () => {
    setIsHovered(false);
  };

  return (
    <div>
      {isHovered ? (
        <div
          onMouseEnter={handleHover}
          onMouseLeave={handleLeave}
        >
          {/* Content of the first div */}
          <h2>Hover over me</h2>
        </div>
      ) : (
        <div>
          {/* Content of the second div */}
          <h2>Hovered!</h2>
        </div>
      )}
    </div>
  );
}

export default App;