AppProvider issues

[StefMTP]

I am starting a simple Polaris React app with TypeScript and all of a sudden, I can no longer wrap the application by using the AppProvider.

I have tried copying the examples found in the documentation, to no avail. This is the error I am getting:

TS2604: JSX element type 'AppProvider' does not have any construct or call signatures.
    18 |   // dictionary is the desired language, and the second is the fallback.
    19 |   return (
  > 20 |     <AppProvider i18n={i18n.translations}>{/* App content */}</AppProvider>
       |      ^^^^^^^^^^^
    21 |   );
    22 | }
    23 |

When I do it the way I used to do by importing it like a component (import { AppProvider } from "@shopify/polaris";), the error I am getting is this:

TS2786: 'AppProvider' cannot be used as a JSX component.
  Its instance type 'AppProvider' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import(".../node_modules/@shopify/polaris/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.
          Type 'import(".../node_modules/@shopify/polaris/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'import(".../node_modules/@shopify/polaris/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'import(".../node_modules/@shopify/polaris/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                    Type '{}' is not assignable to type 'ReactNode'.
     5 | const App = () => {
     6 |   return (
  >  7 |     <AppProvider i18n={translations}>
       |      ^^^^^^^^^^^
     8 |       <Frame>
     9 |         <Page>
    10 |           {/* App content */}

What am I doing wrong? What method should I be using? Which version is the right one? I am on Polaris version 9.6.0, React 18 (I've tried going back to 17 without results) and TypeScript 4.6.4.

[StefMTP]

I hadn't updated my types to React 17. Now it is working properly.