fix this code 

```js
import React, { useState, useEffect } from "react";
const App = (props) => {
  const DEFAULT_INPUT_VALUE = "";
  const DEFAULT_EMOJI = "❤️"; // default emoji is a heart
  const [inputValue, setInputValue] = useState(DEFAULT_INPUT_VALUE);
  const [emoji, setEmoji] = useState(DEFAULT_EMOJI);
  const [error, setError] = useState(false);
  useEffect(() => {
    const intervalId = setInterval(() => {
      if (emoji === "❤️") {
        // animate the heart emoji
        setEmoji((prevEmoji) => (prevEmoji === "❤️" ? "💓" : "❤️"));
      } else if (emoji === "💔") {
        // animate the broken heart emoji
        setEmoji((prevEmoji) => (prevEmoji === "💔" ? "💔️" : "💔"));
      }
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, []);
  const handleInputChange = (event) => {
    const { value } = event.target;
    if (value.trim() === "") {
      // input is empty, do not update the state
      return;
    }
    setInputValue(value);
    if (value.endsWith(".js")) {
      setEmoji("❤️");
      setError(false);
    } else {
      setEmoji("💔");
      setError(true);
    }
  };
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        style={error ? { borderColor: "red" } : {}}
      />
      <p>{emoji}</p>
      {error && <p>Error: input must end with ".js"</p>}
    </div>
  );
};

export default App;

```