how can I use this toggleviewMode function used to another component? (NEXT.js) Typescripte

This is my code where onclick function is created

const Pagecontent: NextPage = ({}) => {

const [toggleViewMode, setToggleViewMode] = useState(false);

return(
<input type="checkbox" value="" id="default-toggle" className="sr-only peer"
onClick={() => setToggleViewMode(!toggleViewMode)}>
</input>
)
}

now I want to use this toggleViewMode for another component like this

<div className={`mt-2 max-w-lg mx-auto grid gap-5 grid-cols-${toggleViewMode ? '2' : '1'}`}>