class component -> functional component (#41089)
easier to read
## Documentation / Examples
- [x ] Make sure the linting passes by running `pnpm lint`
- [ x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
