If you want to use the web platform API for View Transtions in React there is an additional step you need to take in order to trigger the transition.

First make sure your elements have a view transition name, this can be done dynamically if you have a list of elements:

<div style={{viewTransitionName: `vt-${id}`}}>...</div>

Or in CSS:

.myElement {
  view-transition-name: my-element-transition;
}

The key then in React is use flushSync to trigger the state change on order for the component to rerender and trigger the View Transition.

function MyComponent() {
  const [state, setState] = useState(1);

  function onClick() {
    if ("startViewTransition" in document) {
      document.startViewTransition(() => {
        flushSync(() => {
          setState(state+1);
        });
      });
    } else {
      setState(state+1);
    }
  }

  return <button onClick={onClick}>Set state</button>
}

This may change in the future with the potential new inclusion of a <ViewTransition> component in React core: https://github.com/facebook/react/pull/31975

You can read more on this new experimental API in React here.