형들 span style 바꾸는거 궁금한데

import { useState,useRef } from 'react';
const UseRef1 = () => <Ex82useState />
const Ex82useState = () => {
  //const [spanStyle, setSpanstyle] = useState({ color: "red" })
  const chspan = useRef(null);

  /*const onButtonClick = () => {chspan.current.style.color="green";
  chspan.current.style.font="30px";
  chspan.current.style.display="block";
  chspan.current.style.width="6em";
  chspan.current.style.border="3px dotted magenta";
  chspan.current.style.margin="20px";
 
};*/
  const spanstyle={color:"red"};
  const newStyle = { color: "green", fontSize: "30px", display: "block", width: "6em", border: "3px dotted magenta", margin: "20px" }
  return (
    <div>
      <h3> CSS 스타일 동적 변경</h3>
      <hr />
      <p style={{ color: "blue" }}>  이것은 <span style={spanstyle} ref={chspan}> 문장입니다. </span> </p>
      <input type="button" value="스타일변경" onClick={()=>{
     
      chspan.current.style="color:green"
      console.log(chspan.current.style)
      }} />
    </div>
  );
};

export default Ex82useState;

궁금한게있습니다. 저기서<span style={spanstyle}에서 span style 값을 줬을때는 spanstyle에 객체값을 줘서
바꿔서 줬는데

<input type="button" value="스타일변경" onClick={()=>{
     
      chspan.current.style="color:green"
      console.log(chspan.current.style)
      }} />
에서 chspan.current.style값을 바꿀때는 객체형식이 아닌 스트링값으로 줘야하는지 궁금함
궁금합니다.