javascript – How to pass a function with parameters in react with typescript

I want to pass a handleClick to the son so I don’t have to do it twice. The code is the following:

Mother:

const Mother = () => {
    const (selectedOption, setSelectedOption) = useState<'rooms' | 'questions' | 'notifications'>('rooms')

    const customSectionStyle = 'bg-primary-500 text-white hover:bg-primary-600'

    //handle click
    const handleClick = (href, section) => {
      setSelectedOption(section);
      router.push(href)
    }
    return(
        <>
            <Son onClick={() => handleClick} selectedOption={selectedOption} customSectionStyle={customSectionStyle}/>
        </>
    )
}

Son:

const Son: React.FC<{ selectedOption?: string | '', onClick?: (href: string, section: string) => void | void, customSectionStyle?: string | '' }> = (selectedOption, onClick, customSectionStyle) => {
    return(
        <MyComponent onClick={() => {onClick("https://stackoverflow.com/",'home')}} customStyle={selectedOption === 'rooms' ? customSectionStyle : ''}/>
        <MyComponent onClick={() => {onClick("https://stackoverflow.com/",'settings')}} customStyle={selectedOption === 'settings' ? customSectionStyle : ''}/>
        //...
    )
}

Basically this sets the background color in case an option is selected or not.
MyComponent is a component that takes that props (and/or others) and sets its own content.

This throws the type error _onClick is not a function.
I beleive I didn’t do it properly.. What did I miss, in your opinion?

Thank you very much!