Как предотвратить дефолтную отправку формы в React

У меня есть компонент FormBox.js

import PropTypes from 'prop-types';

const FormBox = (props) => {
    return <form className={`shadow p-3 ${props.className}`}>{props.children}</form>;
};

FormBox.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
};

export default FormBox;

в App.js у меня происходит отправка формы но не срабатывает event.preventDefault(). Я так понимаю что это из за того что это форма у меня компонент. Как можно предотвратить отправку формы?

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            posts: [],
            post: {
                title: '',
                body: '',
            },
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    async handleSubmit(event) {
        event.preventDefault();

        const response = await postApi.addPost(this.state.post);
        console.log(response);
    }

    render() {
        return (
            <div className="container">
                <FormBox onSubmit={this.handleSubmit} className="mt-4">
                    <Button className="btn-info" type="submit" />
                </FormBox>
            </div>
        );
    }
}

export default App;

import React from 'react';
import PropTypes from 'prop-types';

const FormBox = (props) => {
    return <form onSubmit={props.onSubmit} className={`shadow p-3 ${props.className}`}>{props.children}</form>;
};

FormBox.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
};

export default FormBox;