Ошибка машинописи не может вызвать объект, который возможно не определен

Question

Реакция обратного вызова onClick. Невозможно вызвать объект, который, возможно, не определен.

Ниже представлен мой родительский компонент, который обрабатывает state приложения.

 function App() {   
    const [bandData, setBandData] = useState<any | undefined>(undefined);
    return(
      <> 
          <Bands bands={bands} onBandClick={band => setBandData(band)} />
          <Modal bandData={bandData} />
      </>
    )
}

Далее идет мой компонент, который передает состояние обратно в дерево. Тем не менее я получаю следующую ошибку машинописи:

Невозможно вызвать объект, который, возможно, не определен.

type Props = {
   bands: any[];
   onBandClick: (arg: any) => void;
}

function Bands({bands, onBandClick}: Props) {
   return(
     <div>
       {bands.map(band => {
         // the error is coming from onBandClick
         // No error if I change it to onBandClick={onBandClick}
         <Band name={band.name} onBandClick={band => onBandClick(band)} />
       })
     </div>
   )
}