There is no data in my payload. How can I make it display on the left?

https://i.stack.imgur.com/n4fxm.png

That is an image of the app. The right is a form which is used to add items. The items are displayed on the left. It is done with react, redux, axios, ... The items themselves show up on the left but there is no data, which should be transfered from the form to the itembox. Here is some code.

App.js:


import React, { useEffect } from 'react';
import { Container, Grow, Grid } from '@material-ui/core';
import {getMenu} from './actions/menu'

import MenuItems from './components/MenuItems/MenuItems';
import Form from './components/Form/Form';
import useStyles from './styles';
import { useDispatch } from 'react-redux';
import NavBar from './components/navBar/NavBar';

const App = () => {
    const classes = useStyles();
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getMenu());
    }, [dispatch]);

    return (
        <Container maxWidth="lg">
            <NavBar/>
            <Grow in>
                <Container>
                    <Grid container justify-content="space-between" align-items="stretch" spacing={3}>
                        <Grid item xs={12} sm={7}>
                            <MenuItems />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <Form />
                        </Grid>
                    </Grid>
                </Container>
            </Grow>
        </Container>
    );
}

export default App;

Form.js : 

import React, {useState} from 'react';
import useStyles from './styles';
import { TextField, Button, Typography, Paper } from '@material-ui/core';
import { useDispatch } from 'react-redux';
import {createMenuItem} from '../../actions/menu';

const Form = () => {
    const [menuData, setmenuData] = useState({title: '', prijs: ''});
    const classes = useStyles();
    const dispatch = useDispatch();

    const handleSubmit = (e) => {
        e.preventDefault();

        dispatch(createMenuItem());
    }

    const clear = () => {
        setmenuData({ name: '', price: '' });
    }

    return (
        <Paper className={classes.paper}>
            <form autoComplete="off" noValidate className={`${classes.root} ${classes.form}`} onSubmit={handleSubmit}>
            <Typography variant="h6">Voeg een product toe</Typography>
                <TextField 
                    name="name" 
                    variant="outlined" 
                    label="Naam product" 
                    fullWidth 
                    value={menuData.name} 
                    onChange={(e) => setmenuData({...menuData, name: e.target.value})}
                />
                <TextField 
                    name="price" 
                    variant="outlined" 
                    label="Prijs per product" 
                    fullWidth 
                    value={menuData.price} 
                    onChange={(e) => setmenuData({...menuData, price: e.target.value})}
                />
                <Button className={classes.buttonSubmit} variant="contained" color="primary" size="large" type="submit">Toevoegen</Button>
                <Button variant="contained" color="secondary" size="small" onClick={clear}>Verwijder</Button>
            </form>
        </Paper>
    );
}

export default Form;

If you want to see some other files, please let me know. I really hope this gets resolved soon.