I have a react functional component which accepts a function with optional arguments. I need call this component passing a function having all the arguments in one parent component and with a function having only the required arguments in the other parent component. An example would be like this:

    interface Props {
      onValueChange?: (a, b, c?, d?) => void;
    }
    
    export const MyComponent = ({onValueChange}: Props) => {
    
      return (
        <InputField
          onChange={() => onValueChange(a, b, c, d)}
        />
      );
    }
    
    const FunctionWithCorrectArgsComp = () => {
      const f = (a, b, c?, d?) => {};
    
      return (
        <MyComponent
          onValueChange={f}
        />
      )
    }
    
    const FunctionWithLessArgsComp = () => {
      const f = (a, b) => {};
    
      return (
        <MyComponent
          onValueChange={f}
        />
      )
    }

I want to know when I do this it will cause any problem for the FunctionWithLessArgsComp when the onChange event is called on MyComponent.