How can I define types of var id with its property in Typescript?

I got a job to convert js file to ts file at the moment. The issue I encountered now is; have no clue whether I should define types for id with this expression e,g, id={id}

So far, I attempted:

1. despite I actually defined it as any type, these error underlines never disappear.
2. And error messages...

• When I put mouse on its interface's name,

  Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739)
  Conversion of type 'string' to type 'ProfileIconListStyle' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
  

• and var id error message is:

  Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739)
  Conversion of type 'string' to type 'ProfileIconListStyle' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
  '>' expected.ts(1005)
  

• lastly, the property {id} error message is:

  (property) id: string
  Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739)
  Type '{ id: string; }' is not assignable to type 'ProfileIconListStyle'.
    Object literal may only specify known properties, and 'id' does not exist in type 'ProfileIconListStyle'.ts(2322)
  

Here are the codes that I have converted it so far.

import React from 'react'
import { ProfileIcon } from 'components/ProfileIcon'

interface ProfileIconListProps {
  id: string
  size: string
  isLeft: boolean
  profile: Array<Member>
}

**// I believe this is the problem, but no idea... **
interface ProfileIconListStyle {
  isLeft: boolean
}

interface Member {
  src: string
  color: string
}

export function ProfileIconList({ props }: { props: ProfileIconListProps }): JSX.Element {
  var { id, size, isLeft, profile } = props
  isLeft = isLeft === false ? false : true
  
**// from here to end, all lines of codes are underlined with red error marks.**
  return (
    <ProfileIconListStyle id={id} isLeft={isLeft}>
      {profile.map((member: Member, index: number) => {
        return <ProfileIcon key={`${id}-list-${index}`} props={{ size, src: member.src, color: member.color }} />
      })}
    </ProfileIconListStyle>
  )
}

And origin, js format.

import React from 'react'
import { ProfileIcon } from 'components/ProfileIcon'

export function ProfileIconList(props) {
  var { id, size, isLeft, profile } = props
  isLeft = isLeft === false ? false : true

  return (
    <ProfileIconListStyle id={id} isLeft={isLeft}>
      {profile.map((member, index) => {
        return <ProfileIcon key={`${id}-list-${index}`} size={size} src={member.src} color={member.color} />
      })}
    </ProfileIconListStyle>
  )
}