Why does Typescript swear at props?

Question

typescript

The code of the file from which the props are thrown:

import React, { ReactNode } from 'react'
import s from './Fishes.module.css'
import clownfish from '../../image/clownfish.svg';
import fish from '../../image/fish.svg';
import fish1 from '../../image/fish1.svg';
import fish2 from '../../image/fish2.svg';
import fish3 from '../../image/fish3.svg';
import fish4 from '../../image/fish4.svg';
import Fish from './Fish/Fish';

const Fishes: React.FC = () => {
    let array: { name: ReactNode, random: number }[] = [
        {
            name: clownfish,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish1,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish2,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish3,
            random: Math.random() * (80 - 20) + 20
        },
        {
            name: fish4,
            random: Math.random() * (80 - 20) + 20
        },
    ];

    console.log(array);

    return (
        <div className={s.area}>
            {array.map(el => <Fish imgName={el.name} random={el.random} />)}
        </div>
    )
}

export default Fishes;

The code in which the props come:

import React from 'react'
import s from './Fish.module.css'

const Fish: React.FC = (props: any) => {
    return (
        <div className={s.area}>
            <img src={props.imgName} className={s.imgName} alt={props.imgName} />
        </div>
    )
}

export default Fish;

Error message:
Type '{ imgName: ReactNode; random:number; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'imgName' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
What the code should do:
I throw name: svg pictures into an array of objects, random: a number from 20 to 80, after that I go through the array and try to pass each element, in the next component, the props fall into the src and alt of the img tag.

Answer 1

It is necessary to properly type Fish, then everything will be beautiful.

interface FishProps {
  imgName: string;
  random: number;
}

const Fish: React.FC<FishProps> = (props) => {
...

Inside Fishes, pass another key={el.name} prop to Fish
And in general, I'm surprised that this site has syntax highlighting for CoffeScript, which no one fucking needs, but there is no TS. It's awesome.