How do I make my custom toolbar button use the form's validation function in react-admin?

Question

I created a custom Toolbar with a custom toolbar button. That custom button should act like the standard SaveButton but should do extra stuff after submitting the form. Submitting the form should only be possible if the validation passes. If not the fields not passing should be marked.

In short, my custom button should act like the built-in SaveButton but let me do some extra stuff after submit.

Unfortunately, the validation function of the form is not called and according to the invalid flag, the form is always invalid. What am I doing wrong?

This is how I implemented the custom button:

const ActionButton = ({ handleSubmitWithRedirect, ...props }) => {
    const form = useForm();
    var formdata = form.getState().values;

    const handleClick = useCallback(() => {
        // Validation function of the form is NOT called, the form is always invalid... why?
        if (!props.invalid) {
            doSomeExtraStuff();
            handleSubmitWithRedirect('list');
        } else alert("Invalid!");
    }, [formdata, form]);

    return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};

My Toolbar function is like:

export const MyCustomToolbar = props => (
    <Toolbar {...props} >
        <SaveButton
            label="Save"
            redirect="list"
            submitOnEnter={true}
            variant="outline"
        />

        <ActionButton
            label="Save and do extra stuff"
            redirect="edit"
            submitOnEnter={false}
            variant="text"
        />

    </Toolbar>
);

Answer 1

Please see inline comments. This calls the validation on the fields and then submits to a custom route. Refreshes the page on Success and notifies too.

The Create Form

<Create
   title=" "
   basePath={basePath}
   resource={`yourapi/path/${record.id}`} //custom route -magic happens here
   successMessage="Successfully Saved"
   >
     <SimpleForm
        validate={validateFormFunction}  //global - validate your inputs here
        toolbar={<SaveListFormToolBar />}
        >
      //form fields go here

     </SimpleForm>
</Create>

The SaveButton

const SaveListFormToolBar = (props) => {
  //you could do your prevalidation here 

  console.log(props);
  return (
    <Toolbar {...props}>
      <SaveButton
        label="Save List"
        redirect={false}  //refreshes the page
        submitOnEnter={false}
        variant="contained"
        color="secondary"
        icon={<SaveIcon />}  //or any other icon from material UI icons
      />
    </Toolbar>
  );
};