A working model that replicates the problem, described in the title, is here:

https://codesandbox.io/s/workingreactgrid-zvz12

In the program, the first thing to do is to enter any arbitrary date in the Date of Sale datepicker (under 'Exit Price' on the left). This creates a table that will appear below the inputs. Now the problem I am running into is that when I enter any number for "Rents - Monthly" or for any of the other expenses, e.g. Repairs & Maintenance, Insurance, etc., the numbers will only appear in the table after I manually click on the table.

My research suggests that I am probably doing something wrong with my useEffect in the App component. My hypothesis is that the table is simply 're-rendering' when I click on it, thereby updating it to the latest state. I could be wrong, but I think that's probably somewhere on the right track. But after a week of trying to explore different approaches and failing to get the table to automatically show the latest input data, I'm ready to ask for help.

In the Sandbox link above, nearly all the relevant code is contained in the App and Inputs component. I cleaned it up heavily so that it's easier to troubleshoot, so hopefully it helps.