How to react function component in like a toggle button

Question

I want the icon components to change after pressing the Like button, but it doesn't go my way. Would it be possible to get some help?

"Heart" and "HeartOutline" components call icons.

const [heart, setHeartRed] = useState({
    state: false,
    number: '0',
 });

const isLikeyOnHandler = () => {
    heart.state
      ? setHeartRed({ state: false, number: '0' })
      : setHeartRed({ state: true, number: '1' });
  };

return(
    <HeartButton
      text={heart.number}
      icon={heart.state ? <Heart /> : <HeartOutline />}
      onClick={() => isLikeyOnHandler()}
    />
)

Answer 1

const [heart, setHeartRed] = useState({
    state: false,
    number: '0',
 });

const isLikeyOnHandler = () => {
setHeartRed((prevState)=>({state:!prevState.state,number:+!+prevState.number+""})
  };

return(
    <HeartButton
      text={heart.number}
      icon={heart.state ? <Heart /> : <HeartOutline />}
      onClick={isLikeyOnHandler}
    />
)