onTruncate callback not being called after rendering the ellipsis

[nikkodsg]

I have a use case where in the content composed of tags is truncated when reaching 3 lines/rows. Each tags can be added or removed by the user after the initial load (mounted). I use the value of "truncated" from the onTruncate callback to handle some outside logic that's why it's important to get the correct value of it.

I was expecting that when the component truncates the content and renders the ellipsis, it will call the onTruncate callback with a value of "true" since it was truncated. Take note that this happens after the initial load and when the content is being updated.

To Reproduce

Please take a look at this sample demo: https://codesandbox.io/s/lucid-joliot-lljlit?file=/src/App.js

1. Open the console.
2. Add tags by clicking any tags from the bottom box. Add until you reached the maximum content (3 lines) before it truncated. 3. Watch the value of "truncated" logged.
3. You will see that after it renders the "More" button, the value of "truncated" from the console is still "false"