How to fix this

import { useState } from "react";
import "./App.css";

const phrases = [
  "No",
  "Are you sure?",
  "Really sure?",
  "Pookie please",
  "Don't do this to me",
  "You're breaking my heart :(",
];
function App() {
  const [noCount, setNoCount] = useState(0);
  const [yesPressed, setYesPressed] = useState(false);
  const yesButtonSize = noCount * 20 + 16;

  function handleNoClick() {
    setNoCount(noCount + 1);
  }

  function getNoButtonText() {
    return phrases [Math.min(noCount, phrases.length - 1)];
  }

  return (
    <div ClassName="valentine-container">
      {yesPressed ? (
        <>
          <img>
            alt="bears kissing"
            src="https://media1.tenor.com/m/tl4tMev7ICEAAAAC/instagram-zefexwoo-shaurya.gif"
          />
          <div ClassName="text">Yay!!!!</div>
        </img>
      ) : (
          <>
            <img
              alt="bears with hearts"
              src="https://media1.tenor.com/m/583ELpFX1uEAAAAC/bear-running.gif"
            />

            <div ClassName="text">Will you be my valentine?</div>
            <div>
              <button
                className="yesButton"
                style={{ fontSize: yesButtonSize}}
                onClick={() => setYesPressed(true)}
              >
                Yes
              </button>
              <button onClick={handleNoClick} className="noButton">
                {getNoButtonText()}
              </button>
            </div>
          </>
        )}
      </div>
    );
  }

export default App;