Fix React deprecations from React 18 upgrade in @packages/reporter

[AtofStryker]

What would you like?

With @packages/reporter being cut over to React 18 in #30511, there are some deprecations/issues we need to take care of for future versions of React as these will eventually be removed:

• Cut over class components to functions to more easily consume hooks. See this guide. Here are the list of components that need to be cut over at time of writing:
  • main.tsx
  • attempts.tsx
  • collapsible.tsx
  • command.tsx
  • error-code-frame.tsx
  • flash-on-click.tsx
  • switch.tsx
  • runnable-and-suite.tsx
  • runnable-header.tsx
  • runnables.tsx
  • test.tsx
• Removing the use of defaultProps. This should naturally happen when cutting over from class components to functions. All components listed should be mentioned above:
  • main.tsx
  • collapsible.tsx
  • command.tsx
  • test-error.tsx
  • flash-on-click.tsx
  • runnable-and-suite.tsx
  • test.tsx
• Using hooks where necessary, use are useRef() .
  • attempts.tsx
  • collapsible.tsx
  • error-code-frame.tsx
  • runnables.tsx
  • test.tsx (via reference possibly)

There are possibly other issues that are missing that we should try to catch. Not all components here have component tests, and we should add ones that make sense to further dogfood our CT adoption on react18 and serve as a better regression suite.

Why is this needed?

Eventually the APIs mentioned above will be removed in future versions of React and errors throw in the console when developing Cypress (does not happen in production binary of Cypress since we use the production React bundle), which causes noise:

Other

Some errors include:

attempts.tsx

Component "Attempt" contains the string ref "container". Support for string refs will be removed in a future major release. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

collapsible.tsx

Encountered two children with the same key, `3`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

 Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

[AtofStryker]

spiked into in e896aaa. needs more verification for when we have time but most of the work should be done in e896aaa

[AtofStryker]

we would also need to test Cypress studio with the changes as well