react-antd | React & Redux & React-Router based frontEnd template | Router library

I am new to programming and want to learn React. Currently, the concept of state is very confusing to me. In the code below, I am trying to write this simple app where I ask the user to enter number one, then save that number and then enter number two, save that number as well, and then show the total in the end. I am able to enter only one number in the input field. I don't know what to put in as value in the input field.

The Table component from Ant Design has the prop onChange which is fired whenever some pagination, filter or sort is happening. In my case it is about filtering. When using the default filter elements from the table head, the callback is fired. But I am using custom filter elements outside of the Table component which set a local state and this state is used for the filteredValue prop on the column. The filtering itself works flawless. But the onChange callback is not fired. I am interested in the attributes from onChange since they contain the currentDataSource props which represents the actual rendered data source object. I can't find any other callbacks for Table which are triggered whenever the component renders.

Has anybody an idea about another way to get the rendered dataSource object when filters are enabled? Sure, I could start calculating on the original dataSouruce object because I am aware of the filters, but since Table provides the information in genereal I would like to prevent the redundancy.

Update:

See basic example here: https://codesandbox.io/s/react-antd-styled-template-73yxh Whenever you use the filter elements in the table head, you see a console.log event (via Table's onChange prop). When you click the button on the bottom, you will see that the filter changes, but the console.log event does not happen.

I have a Loader component which works as expected with defaultProps:

I already spent too much time searching on how to configure the column headers of Antd tables, in the official Antd table docu and elsewhere, but I was not successful: Is there a simple way of adjusting the word-wrap of the column header?

Right now, if the column is too small (e.g. when resizing the browser window), letters are floating into new lines in an uncontrolled manner. English hyphenation would be cool, but for a start I would appreciate having 2 or 3 ellipsis dots instead of freely dropping characters.

Any Antd-experts out there who could help me out, please?