How to render functional component with props

Question

I'm trying to render a component as a child passing the parent props, but page doesn't show anything, just white. When I take out the part of the code that uses the props, it renders. I'm trying to pass a state var and a function. Thanks :)

const MainButtons = (props) => {
  const { depositAmount } = props;
  return (
    <div className="container1">
      <form
        className="deposit"
        onSubmitCapture={(event) => {
          event.preventDefault();
          const depositAmount = depositAmount;
          props.deposit(depositAmount);
        }}
      >
        <input
          type="text"
          className="inputs"
          placeholder="Amount to deposit"
          ref={(input) => (depositAmount = input)}
        />
        <button className="btnS btnS-colored">
          <BsArrowBarUp />
          Send
        </button>
      </form>
    </div>
  );
};

And the parent renders this:

<MainButtons
  depositAmount={this.state.depositAmount}
  deposit={this.deposit}
/>