React Typescript Props Interface Containing an Interface – Reactjs

i have a functional component receiving props from another functional component. I have an interface on the receiving component that also contains an interface but this interface is always ‘undefined’ when i log in the console. However the value of the props below contains the data I was expecting to be populated into my competition interface. My component is:

import React, { useState } from 'react';
import { ICompetition } from '../interfaces/ICompetition';

interface CompetitionProps {
   competition: ICompetition;
}

function Competition(props: CompetitionProps) {
    console.log(props);
    console.log(props.competition);
    return (
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div id={props.competition.competitionId.toString()} className="text-left" style={{minWidth: 0, textOverflow: 'ellipsis', overflow: 'hidden'}}>                            
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Competition;

I’m sending the data to this component using the spread operator from the component below:

import React, { useEffect, useState, } from 'react';
import "../App.css";
import { ICompetition } from '../interfaces/ICompetition';
 import Competition from './Competition';

interface HomeProps {
    bookmakerid: string | null;
}

function Home(props: HomeProps) {
    const [compList, setData] = useState<ICompetition | null>(null);
    const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);

    useEffect(() => {
        fetch("http://localhost:5242/Competitions?bid=" + props.bookmakerid, { method: "POST" })
            .then(response => {
                if (response.ok) {
                    //console.log(response);
                    return response.json();
                }
            })
            .then(data => {
                 setData(data);
            })
            .catch(err => {
                setError(err)
            });
    }, []);
    console.log(compList);
    return (
    <section className="section section-variant-1 bg-gray-100">
        <div className="isotope-item" data-filter="football">
            <div className="sport-table">
                <div className="sport-table-tr">

                    <div id="runnerContainer" className="carousel-inner">
                        {compList && compList instanceof Array && compList.map((comp) => (                                
                            <Competition competition={...comp} key={comp.competitionId } />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    </section>
);
}

export default Home;

My ICompetition interface is defined as follows

export interface ICompetition {
    competitionId: number;
    bookmakerId: number;
    competitionName: string;
    sportId: number;
    lastUpdated: Date;    
    venue: string;
    competitionDate: Date;
    downloadable: boolean;
    displayHead: boolean;
    headerText: string;
    competitionStatus: number;    
    sortOrder: number;
    errorCode: string;
}

Any help on how i could get this to work would be appreciated.