What does this PR do?

Fixes a bug where step was not being updated based on stepProp

Where should the reviewer start?

pagination.js

What testing has been done on this PR?

added a jest test

How should this be manually tested?

  const [itemsPerPage, setItemsPerPage] = useState(20);
  const [totalItems, setTotalItems] = useState(itemsPerPage);

  useEffect(() => {
    setTotalItems(250);
  }, []);

  return (
    <Grommet theme={theme}>
      <Select
        testId="rows-per-page-dropdown"
        defaultVal={20}
        value={itemsPerPage}
        options={[10, 20, 50, 100]}
        onChange={({ option }) => {
          console.log(option);
          setItemsPerPage(option);
        }}
      />
      <Pagination numberItems={totalItems} step={itemsPerPage} />
    </Grommet>
  );

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

We added a step state then set that value within the PaginationStep so since I changed step from being directly assigned to stepProp to using useState it was only getting the initial value of stepProp during the initial render and was not updating.

This is an alternative approach to #7186
This way we are leveraging the useControlled func which will cause one less re-render.

What are the relevant issues?

closes #7201

Screenshots (if appropriate)

Do the grommet docs need to be updated?

no

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

backwards compatible