Adding input from textarea/form to a list with React

I’m studying to become a Front-End Developer and now react is on the menu. I need to create a react-app that has a grocery list and a shopping cart. I can add Items to the grocery list and eventually I can click on them to transfer them to the shopping cart.

The whole react tree like experience is quitte new and overwhelming. But my question is, I need to add the data that I get from a input field to a UL/LI.

I have a GroceryList component, a InputField component, a List component and a ListItem component.

The code I have now for the InputField works kind of but it displays the information directly on the screen and not on submit.

The code is:

import React, { useState } from "react";
import { ReactDOM } from "react";


function InputField(props) {



    return (

        < div >
            <form>
                <input type="text" onChange={(event) => props.setGroceryName(event.target.value)} />
                <button type="submit" >Add Groceries</button>
            </form>
        </div >
    )
    
}


export default InputField

I defined the setGroceryName in the GroceryList component. Can someone help me how I can change it so it makes an list in the List component. I’m really stuck and can’t seem to find some good help.. Or what do I need to do and where do I need to put it so it takes a ListItem and adds that to the List component.

Thanks in advance. If you guys need more info, let me know.