Difference between useState and props

I am new to React and I am trying to understand the difference between the following two approaches in a simple example where the button color is changed when there is a mouse hover event.

First approach using props:

  function over(props) {
    props.target.style.backgroundColor = 'black';
  };

  function out(props){
    props.target.style.backgroundColor = 'white';
  };

  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button onMouseOver={over} onMouseOut={out}>Submit</button>
    </div>
  );

Second approach using useState:

  const [isMouseOver, setMouseOver] = useState(false);
 

  function handleMouseOver() {
    setMouseOver(true);
  };

  function handleMouseOut() {
    setMouseOver(false);
  };
  
  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        style=
      >
        Submit
      </button>
    </div>
  );

I can see the same behavior is accomplished, but I would like to understand if technically there is any difference between these two, and if they are both valid or perhaps the first one should not be used?

Thanks in advance.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/C8ilWzA