编辑后在底部添加解决方案

我有一个用React和Typescript创建的项目。
存在父组件（Home），它根据状态变量'currentDemo'的值显示子组件。目标是拥有一个导航组件，它将显示单击的任何项。每个导航项都有一个与要显示的组件相关的关联ID。即，导航项'a'应显示组件'a'，导航项'b'应显示组件' b'，下面是代码片段。
Home.tsx（父项）：

import React, { useState } from 'react';
import { Intro } from 'app/components/intro/Intro';
import { SidebarNav } from 'app/components/sidebarNav/SidebarNav';
import { ComponentA } from 'app/components/ComponentA/ComponentA';
import { ComponentB } from 'app/components/ComponentB/ComponentB';

export function Home() {
  //use state to track which demo is currently displayed ('intro' is default)
  const [currentDemo, setCurrentDemo] = useState('intro');

  return (
    <>
      <Header />
      <div className="home">
        <SidebarNav setCurrentDemo={setCurrentDemo} />
        {currentDemo === 'intro' && <Intro />}
        {currentDemo === 'ComponentA' && <ComponentA/>}
        {currentDemo === 'ComponentB' && <ComponentB/>}
      </div>
    </>
  );
}

侧栏导航.tsx（子项）：

import React, { useState } from 'react';

const navData = [
  {
    title: 'Introduction',
    id: 'intro'
  },
  {
    title: 'Component A',
    id: 'ComponentA'
  },
  {
    title: 'Component B',
    id: 'ComponentB'
  }
];

export function SidebarNav(setCurrentDemo: any) {

  //GOAL: PASS ID OF SELECTED NAV ITEM TO PARENT COMPONENT AND SET VALUE OF 'CURRENTDEMO' TO THAT ID
  const handleCurrentClick = (id: any) => {
    if (id === 'intro') {
      setCurrentDemo('ComponentA');
    } else if (id === 'ComponentA') {
      setCurrentDemo('ComponentB');
    } else if (id === 'ComponentB') {
      setCurrentDemo('intro');
    }
  };

  return (
    <div className="sidebarNav">
      <div className="sidebarNav__container">
        {navData?.map((item, index) => (
          <div key={index}>
            <button
              onClick={() => {
                handleCurrentClick(item.id);
              }}
              id={item.id}
            >
              {item.title}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

组件A和组件B的具体实现对于这个场景来说并不重要。我已经通过手动设置'currentDemo'的值进行了测试，正确的演示将显示出来。我还通过console.log（www.example.com）确认了每个导航项的id都正确显示item.id出来。
如何将id的值从SidebarNav传递到Home，并将currentDemo的值设置为被单击的导航项的ID？我感觉我已经接近了，但还不完全正确。
当点击任何一个nav元素时，会出现一个控制台错误，指出setCurrentDemo不是一个函数。这是有意义的，因为它是状态的setter，但是我如何指定我们希望实际上将currentDemo设置为项目ID的值呢？
以下是适用于此应用程序的解决方案。所做的更改是在导航组件中。在导航中添加了一个界面并进行了如下调整：

interface SidebarNavProps {
  setCurrentDemo: React.Dispatch<SetStateAction<string>>;
}

export function SidebarNav(props: SidebarNavProps) {
  const { setCurrentDemo } = props;

...rest of function remains the same 

};