TypeScript: Object is of type 'unknown'.ts(2571)

I'm using relay and graphQL in react Typescript to fetch list of users. While I'm passing the props from ViewerUserList.tsx to UserList.tsx. I'm getting this error: Object is of type 'unknown'.ts(2571)

I've mentioned in below file where I'm getting the error exactly

This is my ViewerUserList.tsx

import React from 'react';
import {graphql, QueryRenderer} from 'react-relay';
import UserList from './UserList'
import environment from "../relayEnvironment"

export default class ViewerUserList extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query ViewerQuery {
            viewer {
              id
              # Re-use the fragment here
              ...UserList_userData
            }
          }
        `}
        variables={{}}
        render={({error, props}) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return (
            <div>
              <div>list for User {props.viewer.id}:</div> //I am getting error here on props
              <UserList userData={props.viewer} />
            </div>
          );
        }}
      />
    );
  }
}

This is UserList.tsx

// OPTIONAL: Flow type generated after running `yarn relay`, defining an Object type with shape of the fragment:
import type {UserList_userData} from './__generated__/UserList_userData.graphql';
import User from './User'

import React from 'react';
import {graphql, createFragmentContainer} from 'react-relay';

type Props = {
  userData: UserList_userData,
}

class UserList extends React.Component<Props> {
  render() {
    const {userData: {apiVersion, users}} = this.props;

    return (
      <section>
        <ul>
          {users!.edges!.map(edge =>
            <User
              key={edge!.node!.id}
              /*We pass the data required by Todo here*/
              user = {edge!.node!}
            />
          )}
        </ul>
      </section>
    );
  }
}

export default createFragmentContainer(
  UserList,
  {
    userData: graphql`
      # As a convention, we name the fragment as '<ComponentFileName>_<PropName>'
      fragment UserList_userData on Query {
        users(
          first: 2147483647  # max GraphQLInt, to fetch all todos
        ) {
          edges {
            node {
              id,
              # We use the fragment defined by the child Todo component here
              ...User_user,
            },
          },
        },
        apiVersion
      }
    `,
  },
);