Warning: `key` is not a prop

Question

I have a component "List of notes", which contains a child component "Note". The "Note" also contains a child component, the "Note Block". It looks like this:

ListOfNotes

<section className='list-of-notes'>
    {notes?.map((note) => (
        <Note
            key={note.note_id}
            note_id={note.note_id}
            title={note.title}
            blocks={note.blocks}
            published={note.published}
            updated={note.updated}
        />
    ))}
</section>

Note

    const Note = (note: TNote) => {
    const dispatch = useAppDispatch();

    const openNoteEditor = () => {
        document.body.style.paddingRight = `${window.innerWidth - document.body.offsetWidth}px`;
        document.body.style.overflowY = 'hidden';

        dispatch(showNotePopup(true));
        dispatch(setCurrentNote(note));
    };

    return (
        <div className='note' onClick={openNoteEditor}>
            <h3 className='note__title'>{note.title}</h3>

            {note.blocks?.map((block) => (
                <NoteBlock key={block.id} id={block.id} type={block.type} data={block.data} />
            ))}
        </div>
    );
};

NoteBlock

const NoteBlock = (block: TBlock) => {
    if (block.type === 'subtitle') {
        return (
            <ReactTextareaAutosize
                className='note__block note__block-subtitle'
                value={block.data.text}
                readOnly
            />
        );
    }
    if (block.type === 'paragraph') {
        return (
            <ReactTextareaAutosize
                className='note__block note__block-paragraph'
                value={block.data.text}
                readOnly
            />
        );
    }
    if (block.type === 'code') {
        return (
            <ReactTextareaAutosize
                className='note__block note__block-code'
                value={block.data.text}
                readOnly
            />
        );
    }
    return <div>Данных нет</div>;
};

Types

export type TNote = {
    note_id: number;
    title: string;
    updated: string;
    published: boolean;
    blocks: TBlock[];
};

export type TBlock = {
    id: string;
    type: string;
    data: {
        text: string;
    };
};

Everything works for me but in the console I get a warning:

Warning: Note: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)

I can't figure out what exactly the React doesn't like about this chain. Please tell me what am I doing wrong?

Answer 1

Solved the problem like this: dispatch(setCurrentNote({ ...note }));

Do not send directly a "props" object to redux.