Button does not render in React

[mileung]

I important brainblocks like import * as brainblocks from 'brainblocks'; then do the whole

useEffect(() => {
  brainblocks.Button.render(
    {
      payment: {
        destination: '...',
        currency: 'rai',
        amount: 1000,
      },
      onPayment: function(data) {
        console.log('Payment successful!', data.token);
      },
    },
    '#nano-button',
  );
}, []);

and I have a div being returned like <div id="nano-button"></div>, but I get the error: "Error: Document is ready and element #nano-button does not exist"

If I put the nano-button div in my index.html file, it renders. What gives? I tried adding a setTimeout to delay the Button.render, but I get the same error.

[mileung]

fixed

<div
  id="nano-button"
  ref={() => {
    brainblocks.Button.render(
  ...