Мелкий макет расширяет React.Componentпоказывая ошибку

Question

Ошибка при получении значения при перемещении компонента.

Преобразование типа '{props: {index: number;AssignmentTitle: строка;AssignmentDescription: строка;AssignmentUtilizedHours: string;AssignmentScheduledHours: string;AssignmentStartDate: string;AssingmentEndDate: string;};} 'печатать InsightsComponent' может быть ошибкой, потому что ни один тип не совпадает с другим. Если это было сделано намеренно, сначала преобразуйте выражение в «неизвестное». Тип '{props: {index: number;AssignmentTitle: строка;AssignmentDescription: строка;AssignmentUtilizedHours: string;AssignmentScheduledHours: string;AssignmentStartDate: string;AssingmentEndDate: string;};} 'отсутствуют следующие свойства из типа' InsightsComponent ': процент, переключение, trimZeroDecimal, render и еще 5.ts (2352) Левая часть арифметической операции должна иметь тип' any ',' number ','bigint' или enum type.ts (2362)

Ниже мой класс компонентов выглядит как

import * as React from 'react';
export interface InsightsComponentProps {
    index: number,
    AssignmentTitle: string,
    AssignmentDescription: string,
    AssignmentUtilizedHours: string,
    AssignmentScheduledHours: string,
    AssignmentStartDate: Date,
    AssingmentEndDate: Date
}
export class InsightsComponent extends React.Component<InsightsComponentProps, any> {
    constructor(props) {
        super(props);
        this.state = {
            icon: any,
            titleText: any,
            titleTextColor: any,
            expanded: false,
        }
    }

    percentage = (parseFloat(this.props.AssignmentUtilizedHours) / parseFloat(this.props.AssignmentScheduledHours)) * 100;

    toggle() {
        this.setState({
            expanded: !this.state.expanded
        });
    }
    public trimZeroDecimal(value: any): string {
        var splitDigits = value.toString().split(":");
        if (splitDigits[1] == "00")
            return splitDigits[0].toString();
        else
            return value.toString();
    }
render() {
 return (
            <View />)
}
}

Ниже мой тестовый класс

import * as React from 'react';
import {InsightsComponent, InsightsComponentProps} from './statisticsComponent';
import {shallow,ShallowWrapper} from 'enzyme';

describe('Testing InsightComponent', () => {

    const props = {
        index: 1,
    AssignmentTitle: 'string',
    AssignmentDescription: 'string',
    AssignmentUtilizedHours: 'string',
    AssignmentScheduledHours: 'string',
    AssignmentStartDate: '10:10:1985',
    AssingmentEndDate: '10-10-1985',

        };
  let wrapper = ShallowWrapper<InsightsComponentProps,any>(<InsightsComponent {props} /> );   // getting compile-time error here

it('trimZeroDecimal', ()=>{

    //let obj = new InsightsComponent(props);
    //expect(mockPlaySoundFile.mock.calls.length).toEqual(0);
    })
});

I wanted to test trimZeroDecimal() method that is inside this component. But I am getting errro while creating instance to component class. below line is showing error.
I just wanted to know how to create instance of react component which has multiple interface inherited
 ShallowWrapper<InsightsComponentProps,any>(<InsightsComponent {props} /> );   // getting compile-time error here