The issue isn't when passing the function, it's when destructuring the props and providing a default function:

{ createCard = f => f }: dataFormProps

This code indicates that createCard should be a function which accepts a parameter and returns a value. Which it doesn't:

createCard: ()=>void

Make the default parameter match the signature:

{ createCard = () => {} }: dataFormProps

You need to declare the prop type in Search Component and declare type to parameter too:

//use this type to both components (children and parent)
interface FuncProps {
    //here you can declare the return type (here is void)
    handleLocationChange: (values: any) => void;
}
//children start
// here are the tip, define the type in the React.FC and in the FC's parameters itself
const Search: React.FC<FuncProps> = (props: FuncProps) => {
    ... your component behavior and view ...
    return (
        {/*↓↓↓↓ use the prop like this ↓↓↓↓*/}
        <input onClick={props.handleLocationChange('something if you need')}/>
    )
};
//children end

// parent start
const Sidebar: React.FC<Props> = (props: FuncProps) => { 
return (
   <>
      <Search handleLocationChange={props.handleLocationChange} /> 
   </>
)
}
//parent end

I hope this answer can help who wants to use typescript and want to easy your own life passing functions through components (I don't recomend pass functions through many levels).

<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >

The expression MyPublicFunction(1) is immediately invoked during evaluating of the containing expression. What you want is to provide a function to clickFunction:

<MyButton name="My Button" clickFunction={() => MyPublicFunction(1)} >

Note that you would get a type error if you had written something like this:

interface myProps {
   name: string;
   clickFunction: () => void;
}

You can try like this

To add event handler for child component

Copyexport default function childComponent(props: Props){
    return(
        <button onClick={(e) => props.parentFunction(e)}></button>
    )
}

The handler type could be like below

Copytype Props = {
   parentFunction: (event: MouseEvent<HTMLButtonElement>: e, email?: string, password?: string, userName?: string) => Promise<void>;
}

Actual event handler

Copy  const parentFunction = (event: MouseEvent<HTMLButtonElement>: e, email?: string, password?: string, userName?: string) => ...