onChange antd Input component doesn't setState (hook) properly with list from axios get in React

Question

I'm new to React, been working on it for the past week. I'm trying to make a simple app that has a 'product create' form and a list of products with a search bar (using Input component from antd); in the list I can click on any product to open the details page.

Right now I'm blocked by some not properly working logic or something I miss. When I tried the Input onChange with an Array I created in the code it worked fine, but now that I'm using a mock api (from fakestoreapi.com to be precise), I can't make it work.

ProductsList.tsx

function ProductsList() {
  const [list, setList] = useState<Array<Product>>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {   // I think something is wrong here
    ProductService.getAll()
      .then((res: any) => {
        setList(res.data);
        setLoading(false);
      })
      .catch((e: Error) => console.log(e));
  }, []);  // tried: 'query' const from state, 'filterList' from state 
  
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {   // Or here (or both here and in useEffect)
    console.log('in onChange');
    const filterList: Array<Product> = list.filter((item) =>
      item.title.toLowerCase().startsWith(e.target.value.toLowerCase())
    );
    setList(filterList);
  }

  return (
    <div>
      <Spin spinning={loading}>
        <List
          header={
            <Input
              type="text"
              placeholder="Search product"
              allowClear
              onChange={onChange}
            />
          }
          split
          dataSource={list}
          renderItem={(item) => (
            <List.Item key={item.id}>
              <Link to={`/products/${item.id}`}>{item.title}</Link>
            </List.Item>
          )}
        ></List>
      </Spin>
    </div>
  );
}

export default ProductsList;

I tried adding some dependencies to the useEffect hook, but maybe they were the wrong ones. As I said, with a local array this worked, but now after loading the full list once, when I get to the Input and search something, the list is deleted. I think I spotted the problem in the fact that I don't reset the list to the full one, but I don't actually know how to do that (that's why I'm here). I tried to search something online but except for dependencies, I didn't find something specific to help me.

If needed, here is the ProductService.getAll() function:

function getAll() {   // http is axios
    return http.get<Array<Product>>(`/products`);
}

I'll be glad to add everything that could be helpful if needed.