Nextjs: Passing useState as props, hook isn't recognized as function-CodePudding

I'm trying to pass "section" and "setSection" from parent to child.

I was following this but it didn't work for me: Passing useState as props in typescript

Error: Unhandled Runtime Error TypeError: setSection is not a function

parent component:

export default function CareerProgression() {
   const [section, setSection] = useState< 'video' | 'condensed' | 'full' >('condensed');

   return (
      <ModuleToggle_withState section={section} setSection={setSection} />
   );
}

child:

import { Dispatch, useEffect, SetStateAction } from 'react';

export function ModuleToggle_withState(section:any, setSection:Dispatch<SetStateAction<any>>) {
// Currently I'm using "any" just so I can test passing useState props

   return (
      <>
         <SegmentedControl
            defaultValue='video'
            value={section}
            onChange={(value: 'video' | 'condensed' | 'full') => setSection(value)}
         />
      </> 
   ); 
}

CodePudding user response：

Components get only one argument which is an object

ModuleToggle_withState({
  section,
  setSection
}: {
  section:any,
  setSection:Dispatch<SetStateAction<any>>
})