I have three different interfaces which are being received as props types by three different components, the thing is, the three components are identical and I'd like to use only one component, but dynamically, with their values based on the received props.

const UsersOverview: React.FC<{users: Interface[]}> = props => {...}

In React with JS I would just set a props and receive the value as props.anything, but with typescript I'd like to know how to set the interface dynamically:

I have something like that:

Interface 1:

export default interface Interface1{
    id: number,
    name: string,
    companyId: number
}

Interface 2:

export default interface Interface2 {
    id: number,
    email: string,
    name: string,
    unitId: number,
    companyId: number
}

Interface 3:

export default interface Interface3 {
    id: number | null,
    name: string | null
}

My child component is like this (I'm using Interface3, but I'd like to set this dynamically):

import React from 'react'

import Interface1 from '/models/Interface3'


const CompanyOverview: React.FC<{company: Interface3}> = props => {
    let [companyName, setCompanyName] = React.useState<string | null>('')

    React.useEffect(() => {
        setCompanyName(props.company.name)        
    }, [props.company])

    return (
        <div>
           <p>Contratante: {companyName}</p>
        </div>
    )
}

export default CompanyOverview