В чем ошибка при использовании компонента?

const List = ({ items }) => {
    return (
        <ul className="list">
            {console.log(items.forEach(i => {
                console.log(i)
            }))}
        </ul>
    );
};

const App = () => {
  return (
    <div className="App">
        <div className="todo">
            <div className="todo__sidebar">
                <List
                    items={[
                        {
                            name: 'Все задачи'
                        },

                        {
                            name: 'Покупки'
                        }
                    ]}
                />
                <List />
            </div>

            <div className="todo__main">
                
            </div>
        </div>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>