Change style on MouseOver event in reactJS

I've just started learinng react and i dont get that why setHeadingText changes the color onMouseOver event but setColor doesn't

import React from "react";

function App() {
  const [headingText, setHeadingText] = React.useState("Hello");
  const [color, setColor] = React.useState("white");
  function mouseOver() {
    setColor("black");
    setHeadingText("Yo");
  }
  function mouseOut() {
    setColor("white");
    setHeadingText("Bye");
  }
  return (
    <div className="container">
      <h1>{headingText}</h1>
      <input type="text" placeholder="What's your name?" />
      <button
        style={{ backgroundColor: { color } }}
        onMouseOver={mouseOver}
        onMouseOut={mouseOut}
      >
        Submit
      </button>
    </div>
  );
}

It works if i use conditional like

const [mouseOver, setMouseOver]=useState(false);
function MouseOver(){
setMouseOver(true);
}

and then

style={{backgroundColor: MouseOver ? "black":"white"}}

but why it doesnt work like that what am i doing wrong??

It's just a syntax error. Brackets are not needed while mentioning color.

<button
    style={{backgroundColor:color}} //brackets not needed.
    onMouseOver={mouseOver}
    onMouseOut={mouseOut}
  >