How to send a usestate through props with interface in TypeScrips and react?

I'm trying to make a light / dark theme . And I have 2 components.The first component is the one below. I succeeded to make a boolean to change my style in my component. It was good so far :

export interface  Props{  theme:boolean;}const Theme: FC<Props> = ({theme}) => {  const [light,setLightMode]=useState(false);  return (<div><div className="card__theme"><div className={light ? "card__light" : "card__light--active"}>Light</div><Switch inputProps={{ "aria-label": "controlled" }} onChange={()=>setLightMode(!light)}/><div className={ light ? "card__Dark" : "card__Dark--active"}>Dark</div></div></div>  );};

What I do right now is to use this component in my Home page where I want to do the same thing.I want to change the style of my components , making 2 className like the code above with a boolean state.The problem that I'm facing is that I can't make another function onChange={} in my home component. First I don't send in interface a function . I want my const [light,setLightMode]=useState(false); and my function onChange={()=>setLightMode(!light)} when I switch the button to work in my Home component from below

const Home: FC = () => {  const percentage = 91;  const [dark,setDark] = useState(false);  return (<div>2<div className="Container-body"><div className="card"><div className={dark ? "card__theme" : "card__theme--active"}><Theme theme={dark} onChange={()=>{setDark(!dark)}}/></div>

So to make it sort. I want to use just the light, setlightTheme boolean state from my Theme component in my Home component . I don't know how I can send this with props in TypeScript...

Here is a print with my code : enter link description here