node_modules/@types/react/index"' has no default export

I was having a similar issue while using Next.js and found out it's possible to simply omit the import declaration in this case. A component like the following would have the first line removed.

import React from "react"; // Delete this line

function MyComponent(): JSX.Element {
  return (
    <div>MyComponent</div>
  );
}

export default MyComponent;

It's still possible to import components, hooks, etc. from React if needed, e.g.:

import { useState } from "react";

Notice I already had the options describe in GoalsAndGambles' answer added to my tsconfig.json file.

You can use this syntax by simply adding "allowSyntheticDefaultImports": true and "esModuleInterop":true to your tsconfig.json

{
  ...
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
  },
  ...
}

You have to use import * as React from "react"; instead of import React from 'react'.

That happens because babel (the one that you were using before) assumes modules.export as default export while typescript (the one that you are using now) does not.