Child Component has many parents and parents want to access its method. How I can achieve that? – Reactjs

I have several filters and they are used by two parents. Both parents have apply button and I want when it is clicked validation function inside each filter to be called. How I can do that?

function DateFilter() {
  const [isError, setError] = useState(false);
  function validation() {
    // if not valid show error message and apply button disabled
    setError(true);
  }

  return ...
}

<DesktopDialog onApply={sendBackend}> <-- apply button is there
  <DateFilter onChange={setForm}>
</DesktopDialog>

and

<MobileFilterModal onApply={sendBackend}> <-- apply button is there
  <DateFilter onChange={(v) => setForm('date', v)}>
  ...other filters
</MobileFilterModal>

I heard we can use useImperativeHandle but are there alternative options I can use?