Type '({ note, onBlockClick }: NoteProps) => void' is not assignable to type 'FC<NoteProps>'. Type 'void' is not assignable to type 'ReactNode'.ts

Question

i am building a component to render a data object to my main page in react typescript. while implementing a functionality change, i received error in my code editor.

1. Type '({ note, onBlockClick }: NoteProps) => void' is not assignable to type 'FC'. Type 'void' is not assignable to type 'ReactNode'.ts(2322) const NoteComponent: React.FC at: const NoteComponent: React.FC = ({ note, onBlockClick }) => {

2. '}' expected.ts(1005) Note.tsx(22, 72): The parser expected to find a '}' to match the '{' token here. at: export default NoteComponent;

since there is no such issue visible to me, related to the errors, as i am returning something from the function, so the function cannot be void. also, for the issue in last line, there is no opening bracket or any bracket missing to be closed.

import { useState } from "react";
import React from "react";
import "./Note.css";

import { Notebook, Block, Section } from "renderer/models/notebook";

interface NoteProps {
  // note: {
  //   id: string;
  //   heading: string;
  //   blocks: Block[];
  //   sections: Section[];
  //   file_name?: string;
  //   created_at?: string;
  //   version?: number;
  // };
  note: Notebook;
  onBlockClick?: (blockId: string) => void;
}

const NoteComponent: React.FC<NoteProps> = ({ note, onBlockClick }) => {

  // render block------------------------------------------------------------------------

  const [showTextArea, setShowTextArea] = useState(false);
  const [activeBlockId, setActiveBlockId] = useState(""); // To track which block is being edited
  const [inputText, setInputText] = useState(""); // State to manage input text for new block
  // const handleAddBlockClick = (blockId: string) => {
  //   // You can perform any desired actions here, like showing the text area
  //   setShowTextArea(true);
  // };
  const handleInputTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputText(event.target.value);
  };

  const handleSaveNewBlock = () => {
    // Implement the logic to save the new block based on activeBlockId and inputText
    // You can update the blocks state or make an API call here
    setShowTextArea(false); // Hide the text area after saving
    setInputText(""); // Reset input text
  };

  const handleBlockClick = (blockId: string) => {
    // Call the onBlockClick prop with the blockId
    if (onBlockClick) {
      onBlockClick(blockId);
    }
  };

  // render subsections---------------------------------------------------------------------------------


  // const [subSectionsExpanded, setSubSectionsExpanded] = useState(false);
  const [subSectionsIsEditing, setSubSectionsIsEditing] = useState<boolean[]>([]);
  const [subSectionsEditedTitles, setSubSectionsEditedTitles] = useState<string[]>([]);
  // const [subSectionsEditedTitle, setSubSectionsEditedTitle] = useState("");

  // render sections----------------------------------------------------------------------------------------


  // const [sectionsExpanded, setSectionsExpanded] = useState(false);
  const [sectionsIsEditing, setSectionsIsEditing] = useState<boolean[]>([]);
  const [sectionseditedTitles, setSectionseditedTitles] = useState<string[]>([]); // Array of edited titles
  // const [sectionseditedTitle, setSectionseditedTitle] = useState("");

  // ----------------------------------------------------------------------------------------------------------



  const renderBlocks = (blocks?: Block[] | []) => {



    if (!blocks || blocks.length === 0) {
      return null;
    }
    return (
      <div className="notebook-blocks">
      {blocks.map((block) => (
        <div key={block.id} className="notebook-block" onClick={() => handleBlockClick(block.id)}>
          <p className="notebook-block-text"
          // onClick={() => handleAddBlockClick(block.id)}
          >
            {block.text}
            {/* <span
              className="add-block-text"
            >
              Add Block
            </span> */}
          </p>
          {showTextArea && activeBlockId === block.id && (
            <div className="text-area-container">
              <textarea
                className="new-block-input-textarea"
                placeholder="Enter block content..."
                value={inputText}
                onChange={handleInputTextChange}
              />
              {/* Add a button or icon to save the new block */}
              {/* <button onClick={handleSaveNewBlock}>Save Block</button> */}
            </div>
          )}
        </div>
      ))}
    </div>
    );
  };

  const renderSubSections = (subSections?: Section[] | [] ) => {

    // const toggleExpansion = () => {
    //   setSubSectionsExpanded(!subSectionsExpanded);
    // };
    const toggleEdit = (subsectionIndex: number) => {
      const updatedEditingArray = [...subSectionsIsEditing];
      updatedEditingArray[subsectionIndex] = !updatedEditingArray[subsectionIndex];
      setSubSectionsIsEditing(updatedEditingArray);

      if (subSections && subSections[subsectionIndex]) {
      // Reset edited title to the original sub-section heading when toggling edit mode
      const updatedTitlesArray = [...subSectionsEditedTitles];
      updatedTitlesArray[subsectionIndex] = subSections[subsectionIndex].heading;
      setSubSectionsEditedTitles(updatedTitlesArray);
    };


    const handleCrossClick = (subsectionIndex: number) => {
      if (subSections && subSections.length > subsectionIndex && subSections[subsectionIndex]) {
      const updatedTitlesArray = [...subSectionsEditedTitles];
      updatedTitlesArray[subsectionIndex] = subSections[subsectionIndex].heading;
      setSubSectionsEditedTitles(updatedTitlesArray);
      }
      toggleEdit(subsectionIndex);
    };


    const handleTickClick = (subsectionIndex: number) => {
      // You might want to perform an action here to save the edited title
      toggleEdit(subsectionIndex);
    };

    // const toggleEdit = () => {
    //   setSubSectionssEditing(!subSectionsIsEditing);
    // };

    // const handleCrossClick = (subsection:any) => {
    //   setSubSectionsEditedTitle(subsection.heading);
    //   toggleEdit();
    // };

    // const handleTickClick = () => {
    //   // You might want to perform an action here to save the edited title
    //   toggleEdit();
    // };

    if (!subSections || subSections.length === 0) {
      return null;
    }
    return (
      <div className="notebook-sub-sections">
        {subSections.map((subsection, subsectionIndex) => (
          <div key={subsection.id} className="notebook-sub-section">
            <div
              className="notebook-sub-section-heading"
              // onClick={toggleExpansion}
            >
              {subSectionsIsEditing[subsectionIndex] ? (
                <div className="edit-mode">
                  <input
                    type="text"
                    value={subSectionsEditedTitles[subsectionIndex]}
                    onChange={(e) =>{ const updatedTitlesArray = [...subSectionsEditedTitles];
                      updatedTitlesArray[subsectionIndex] = e.target.value;
                      setSubSectionsEditedTitles(updatedTitlesArray);
                    }}
                  />
                  <div className="icon-tick" onClick={() => handleTickClick(subsectionIndex)}>
                    &#x2714;
                  </div>
                  <div className="icon-cross" onClick={() => handleCrossClick(subsectionIndex)}>
                    &#x2716;
                  </div>
                </div>
              ) : (
                <div className="normal-mode">
                  {subSectionsEditedTitles[subsectionIndex]}
                  <div className="edit-icon" onClick={() => toggleEdit(subsectionIndex)}>
                    ✎
                  </div>
                </div>
              )}
              {/* {subsection.heading} */}
            </div>

            {renderBlocks(subsection.blocks)}
            {renderSubSections(subsection.sub_sections)}
          </div>
        ))}
      </div>
    );
  };

  const renderSections = () => {

    // const toggleExpansion = () => {
    //   setSectionsExpanded(!sectionsExpanded);
    // };
    const toggleEdit = (sectionIndex: number) => {
      const updatedEditingArray = [...sectionsIsEditing];
      updatedEditingArray[sectionIndex] = !updatedEditingArray[sectionIndex];
      setSectionsIsEditing(updatedEditingArray);

      // Reset edited title to the original section heading when toggling edit mode
      const updatedTitlesArray = [...sectionseditedTitles];
      updatedTitlesArray[sectionIndex] = note.sections[sectionIndex].heading;
      setSectionseditedTitles(updatedTitlesArray);
    };

    const handleCrossClick = (sectionIndex: number) => {
      const updatedTitlesArray = [...sectionseditedTitles];
      updatedTitlesArray[sectionIndex] = note.sections[sectionIndex].heading;
      setSectionseditedTitles(updatedTitlesArray);

      toggleEdit(sectionIndex);
    };

    const handleTickClick = (sectionIndex: number) => {
      // You might want to perform an action here to save the edited title
      toggleEdit(sectionIndex);
    };

    // const toggleEdit = () => {
    //   setSectionsIsEditing(!sectionsIsEditing);
    // };

    // const handleCrossClick = (section:any) => {
    //   setSectionseditedTitle(section.heading);
    //   toggleEdit();
    // };

    // const handleTickClick = () => {
    //   // You might want to perform an action here to save the edited title
    //   toggleEdit();
    // };

    return (
      <div className="notebook-sections">
        {note.sections.map((section, index) => (
          <div key={section.id} className="notebook-section">
            <div className="notebook-section-heading"
            // onClick={toggleExpansion}
            >
              {sectionsIsEditing[index]  ? (
                <div className="edit-mode">
                  <input
                    type="text"
                    value={sectionseditedTitles[index]}
                    onChange={(e) => {
                      const updatedTitlesArray = [...sectionseditedTitles];
                      updatedTitlesArray[index] = e.target.value;
                      setSectionseditedTitles(updatedTitlesArray);
                    }}
                  />
                  <div className="icon-tick" onClick={() => handleTickClick(index)}>
                    &#x2714;
                  </div>
                  <div className="icon-cross" onClick={() => handleCrossClick(index)}>
                    &#x2716;
                  </div>
                </div>
              ) : (
                <div className="normal-mode">
                  {sectionseditedTitles[index]}
                  <div className="edit-icon" onClick={() => toggleEdit(index)}>
                    ✎
                  </div>
                </div>
              )}
              {/* {section.heading} */}
            </div>
            {renderBlocks(section.blocks)}
            {renderSubSections(section.sub_sections)}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="notebook-nested-view">
      {/* <h2 className="notebook-notebook-heading">{note.heading}</h2> */}
      {renderBlocks(note.blocks)}
      {renderSections()}
    </div>
  );
};
export default NoteComponent;