Trying to create a button which removes the task from the list, but the filter method won't work

I'm able to push values but not sure where i'm going wrong with the filtering. Can someone guide me if i'm using the filter method wrong or is it something else?

import { useState } from 'react';

const App = () => {
const [task,setTask] = useState('');
const [list,setList] = useState([]);

const submitHandler = (event) => {
  event.preventDefault();
  const newTask = { id: new Date().getTime().toString(), title: task };
      setList([...list, newTask]);
      setTask('');
}

const clearList = () => {
  setList([]);
}

const removeItem = (id) => {
    const filteredList = list.filter(item => item.id !== id);
    setList(filteredList);
}

  return <div>
          <h2>To do list!</h2>
          <form onSubmit={submitHandler}> Enter Task! 
          <input type='text'
            onChange = {(event) => {setTask(event.target.value)}}>
          </input>
          </form>
          <div>
          {list.map((obj) => (
          <h4 key={obj.id}>{obj.title}<button onClick={removeItem}>X</button></h4>))}
          <button onClick={clearList}>Clear All</button>
          </div>
          </div>
}

export default App