선생님 질문있어요..

import React, { useState } from 'react';
import './App.css';
const App = () => {
  const [list, setList] = useState([
    {
      title: '남자코트 추천',
      like: 0,
    },
    {
      title: '강남 우동 맛집',
      like: 0,
    },
    {
      title: '파이썬 독학',
      like: 0,
    },
  ]);

  return (
    <div className='App'>
      <div className='black-nav'>
        <div>개발 blog</div>
      </div>
      {list.map((item, index) => (
        <div className='list' key={index}>
          <h4>
            {item.title}
            <span
              onClick={() => {
                setList({ ...item.like++ });
              }}
            >
              👍
            </span>{' '}
            {item.like}
          </h4>
          <p>2월 17일 발행</p>
        </div>
      ))}
      ;
    </div>
  );
};

export default App;

위의 코드에서  onClick={() => {
                setList({ ...item.like++ });
              }}

이부분에서 계속App.js:22 Uncaught TypeError: list.map is not a function에러가나오는데 어떻게 고쳐주면될까요?...