II have my MaterialsList component wrapped in a fragment so it should be returning a JSX component, and I’ve tried setting the TypeScript interpreter to workspace in my VS Code but it’s not an option when I go to “TypeScript: Select TypeScript Version”. It only shows “Use VS Code’s Version 5.5.4”. Here is my component:

const MaterialList = () => {
  const { data, isLoading, error } = useMaterials();

  if (error) return console.log(error);
  if (isLoading) return <Spinner />;

  return (
    <>
      <TableContainer>
        <Table variant="striped" colorScheme="#E43D12">
          <Thead>
            <Tr>
              <Th>Title</Th>
              <Th>Qty</Th>
              <Th>Action</Th>
            </Tr>
          </Thead>
          <Tbody>
            {data?.map((material) => (
              <Tr key={material.id}>
                <Td>{material.title}</Td>
                <Td>{material.qty}</Td>
                <Td></Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </>
  );
};

export default MaterialList;

and here is my package.json installed through npm:

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.5.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@tanstack/react-query": "4.28",
    "@tanstack/react-query-devtools": "4.28",
    "axios": "^1.3.4",
    "framer-motion": "^10.0.1",
    "ms": "^2.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.10.0",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@types/ms": "^0.7.31",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}