react-axe | Accessibility auditing for React.js applications | User Interface library

The proper way to use a function component is no different than the proper way to use a class component. You shouldn't try to call your component function -- just like you don't create instances of your classes -- you just use it in your JSX.

By calling your component function, you essentially treat it as a custom hook (a custom hook is just a function that uses React's built-in hooks like useState) that returns React elements. This causes React to complain because you are calling a custom hook from the render method of a class component rather than from the body of a function component.

Here's a possible way to use your Playground component: