I have a React component that takes a generic array of TData as a prop.
I want to use this array with Immer.js and add elements to it.

I have an object called newItemTemplate with some default values and I want to push it to the array:

function MyComponent<TData>({ data, newTemplateObject }: { data: TData[]; newTemplateObject: TData }) {
  const [dataInner, setDataInner] = useImmer<TData[]>(data);

  const addRow = () => {
    setDataInner((draft) => {
      draft.push({ ...newItemTemplateObject }); // Argument of type 'TData' is not assignable to parameter of type 'Draft'
    });
  };

  return <div>...</div>;
}

But I get the error message:

Argument of type ‘TData’ is not assignable to parameter of type ‘Draft’

Why can’t I add TData to Draft< TData>?

Thanks!