React Hook "useTheme" is called in function "product" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" (react-hooks/rules-of-hooks)

React Hook "useProducts" is called in function "product" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" (react-hooks/rules-of-hooks)

React Hook "useState" is called in function "product" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" (react-hooks/rules-of-hooks)

React Hook "useState" is called in function "product" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" (react-hooks/rules-of-hooks)

React Hook "useEffect" is called in function "product" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" (react-hooks/rules-of-hooks)