What you’ve done here is writing a custom hook(useMediaQuery). You’ve done that properly so no issues there. Above code snipped is fine.
The problem is in the index.tsx file when you try to use the above custom hook that you’ve written. As the error suggests your custom hook is called outside the react component there in line 7 of index.tsx.
You have to move the useMediaQuery call inside the App component. Also currently your App component is a class component which you have to convert to a functional component to use hooks inside it.
here’s the adjusted code: https://stackblitz.com/edit/react-ts-m6rwpd?file=index.tsx
CLICK HERE to find out more related problems solutions.