Issue dealing with the apollo client

I am making a full stack app with aws amplify. I am using app sync sdk because I was having issue with generating a aws amplify client. But now it's showing this problem with apollo client. Without generating a client, I am unable to work with API and GraphQL operations.

// src/AppSyncClient.ts

import React, { ReactNode } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import awsconfig from './aws-exports';

const httpLink = createHttpLink({
  uri: awsconfig.aws_appsync_graphqlEndpoint,
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-api-key': awsconfig.aws_appsync_apiKey,
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

const AppSyncProvider: React.FC<{ children: ReactNode }> = ({ children }) => (
  <ApolloProvider client={client}>  
    {children}
  </ApolloProvider> 
**// error : Parsing error: '>' expected.eslint 'ApolloProvider' refers to a value, but is being used as a type here. Did you mean 'typeof ApolloProvider'?ts(2749)
Parsing error: '>' expected.eslint 'ApolloProvider' refers to a value, but is being used as a type here. Did you mean 'typeof ApolloProvider'?ts(2749)
**
export default AppSyncProvider;

Can someone help with this issue?

I have already written the code and what I tried. Is there any different way to deal with the generating a client?

Your file needs a .tsx ending if you want to use JSX syntax in a TypeScript file. Rename it to AppSyncClient.tsx.