How to solve this type Error: X ' is not assignable to type 'IntrinsicAttributes & Props'

Question

Hi everyone I want to implement single sign-on authentication using React, Azure AD and typescript, the problem is I am getting this type error in my my render file and don't know how to solve it. Here below is the error and thanks for your advices:

Type '{ msalInstance: PublicClientApplication; environment: Environment.Browser; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'msalInstance' does not exist on type 'IntrinsicAttributes & Props'.

render.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { Environment } from '../types';
import { PublicClientApplication } from '@azure/msal-browser';

interface PcaProps {
  msalInstance: string;
}

const pca = new PublicClientApplication({
  auth: {
    clientId: '...-...-...-...',
    authority: 'https://login.microsoftonline.com/.......',
    redirectUri: '/',
  }
})

function render() {
  const rootElement = document.getElementById('app-root');
  if (!rootElement) throw new Error('Failed to find the root element');

  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <App msalInstance={pca} environment={Environment.Browser} />
    </React.StrictMode>,
  );

  serviceWorkerRegistration.unregister();
  reportWebVitals();
}

export { render };

App.tsx:

import React from 'react';
    import { Providers } from './providers';
    import { Routing } from './Routing'; 
    
    import type { FC } from 'react';
    import type { Environment } from '../types'; 
    
    interface Props {
      environment: Environment;
    }
    
    const App: FC<Props> = ({ environment }) => (
      <Providers environment={environment}>
        <Routing />
      </Providers>
    );
    
    export { App };

Answer 1

don't you miss a msalInstance : PublicClientApplication; in your Props ?

interface Props {
  environment: Environment;
  msalInstance : PublicClientApplication;
}

const App: FC<Props> = ({ environment, msalInstance }: Props) => ( ...)