I have the following Form component set up. I want it to only accept two types of children:

1. A custom Input component, called InputComponent
2. A normal HTML button element

I would like to generate the following output: {myInput1: "abc", myInput2: "def"}

Form.tsx

interface FormProps {
  children: Array<React.ReactElement<HTMLInputElement | HTMLButtonElement>>;
}

function Form({ children }: FormProps) {
  const handleSubmit = (event: React.SyntheticEvent) => {
    event.preventDefault();

    Children.map(children, (child) => {
      // ...
      // generate desired output here
      // ...
    });
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <InputComponent name="myInput1" value="abc"/>
        <InputComponent name="myInput2" value="def"/>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

I attempted to check if a given child matches the interface of an HTMLInputElement or HTMLButtonELement, and extracting its name and value only if it is an HTMLInputElement. I am struggling to be able to make this differentiation and would appreciate any help I can get.