On a datatable I truncate a column and show the tip for only values that are truncated. If I am on page 1 the tips are shown correctly, however if I move to subsequent pages tips are being shown for values that shouldn't show the tip and also not shown for values that should show the tip

Expected Behavior

A tip should be shown for only values that are truncated and this behaviour should be consistent when changing page in the datatable.

Actual Behavior

Page 1 of a datatable shows tip correctly and only shows tip for values truncated.
Page 2 will show a tip if the corresponding row on page 1 showed the tip.
If on page 2 the tip should be shown it will only be shown if there was a tip shown for the corresponding row on page1.

URL, screen shot, or Codepen exhibiting the issue

Code snippet

      <DataTable id="tablelist" aria-label="tablelist"
        columns={[
          {
            property: "name",
            id: "name",
           render: (datum) => <Text truncate="tip">{datum.name}</Text>,
            size: "small",

Page1

Page 2

Steps to Reproduce

https://codesandbox.io/s/grommet-v2-template-forked-swvu42

1. On page 1, I can see the tip for the truncated name but not for the other two rows, which is what I expect.
2. Move to page 2 , the top row has a tip but it's not truncated so it shouldn't have a tip and the last row should have a tip but doesn't

Your Environment

• Grommet version: ├── grommet@2.28.0
• Browser Name and version: Chrome Version 110.0.5481.178 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): desktop Windows 10