Typescript doesn't care what I put in my interface and doesn't seems to understand my implementation and imports for redux-toolkit & styled components

My Issue:

Typescript seems to be throwing errors on the wrong things. It doesn't seem to care if the interface in my index.tsx file doesn't match the object it is supposed to describe. At the same time it:

1. Gives me an error when trying to import a Type from redux-toolkit.

   

   

2. Gives type error on my store object but the redux docs say shouldn't have any type problems with that.

   

3. Using an example from the styled components docs: claims my traversal of my theme object does not match my DefaultTheme interface even though it clearly does.

What I have tried:

I have tried uninstalling and reinstalling Typescript and all the libraries it complains about the implementations of and well as trying different guides on how to implement them and TypeScript but nothing has helped.

Tools to reproduce:

Here is a link to the GitHub repo containing my troubled code. It points to a local host API that I will not share because I am not permitted to (let's leave it at that). So if you decide to run the code I recommend either replacing the fetch with mock data or removing all code relating to it. To start the project it should be as simple as running npm install and then npm run dev and then in a separate terminal for the typescript compiler run tsc -w.

Please note: I'm running this code base on an AWS Cloud9 instance using Ubuntu Server. I bring this up because I'm not sure if the virtualized environment might have something to do with these problems I am having.

Steps I took to write this code from the ground up:

To initialize my project I ran the command: npx create-next-app --ts --example with-styled-components testNextSite

After I ran that command I then proceeded to add redux to my project following this YouTube guide.

Lastly I added some basic examples to show how useEffect, useState, and redux can be used. I didn't notice the issues with TypeScript until I tried adding some typescript examples which lead to me writing this Stack Overflow post... and now you're all caught up.

Personal notes:

While I have technically spent a year writing typescript code for work; I have only ever written basic interfaces and have never setup or configured typescript myself before. I have even less expertise with NextJs and AWS Cloud9. So I am hoping this problem is a simple fix for someone better versed in the technologies in use here.

Please let me know if there is anything I can do to improve my question. Thank you in advance for any and all help with this issue I'm having.