How to handle conditional rendering inside of the react component

[rodilo]

Hi everyone,

We're using Felte in a React component that includes some conditional rendering. We've noticed that in this setup, Felte doesn't seem to initialize correctly, which I suspect is due to the form reference not being set properly.
This will trigger native submit on the form element, felte submit handler won't work in this case.

Is there a way to ensure proper initialization in such cases? Specifically, can we pass dependencies to useForm to address this issue?

Here is the test repo:
https://github.com/rodilo/felte-test/blob/master/src/components/FelteForm.js

export function FelteForm() {
  const [fakeDataLoaded, setFakeDataLoaded] = useState(false);
  const { form } = useForm({
    onSubmit: (values) => {
      alert("felte submit triggered");
    },
  });

  useEffect(() => {
    setTimeout(() => {
      setFakeDataLoaded(true);
    }, 1000);
  }, []);

 // this part is the issue
  if (!fakeDataLoaded) {
    return <div>loading...</div>;
  }

  return (
    <form ref={form} method="POST" action="/api/fake-endpoint">
      <input type="text" name="email" />
      <input type="password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  );
}

Thank you for your help!