Page not geting updated on react

So, I was trying to make a todo list, but I got stuck here, I was trying to add a dummy goal at first but im not getting any update.

APP COMPONENT

import React, { useState } from 'react';
import './App.css';
import GoalsList from './GoalsList';
import NewGoal from './NewGoal';

const App = () =>{
  const [goalList, setGoalList] = useState([
    {id: 'cg1', text: 'Here is the goal'},
    {id: 'cg2', text: 'Here is the second goal'}
])
  

  const addNewGoalHandler = (newGoal) => {
    setGoalList((prevGoal) => {
      return prevGoal.concat(newGoal);
    })

    console.log(goalList);
  }

  return(
    <div>
      <h1>TO-DO APP</h1>

      <NewGoal onAddGoal={addNewGoalHandler}/>
      <GoalsList goals={goalList}/>
    </div>
  );
}

export default App;

GoalsList COMPONENT

import React from 'react'

const GoalsList = (props) =>{
    return(
        props.goals.map((eachGoal) => {
            return <li key={eachGoal.id}>{eachGoal.text}</li>
        })
    );
}

export default GoalsList

NewGoal Component

import React from 'react'

const NewGoal = (props) =>{

    const addGoalHandler = (event) =>{
        event.preventDefault();

        const newGoal = {
            id: Math.random().toString,
            text: "Dummy Goal"
        }

        props.onAddGoal(newGoal);
    }

    return(
        <form>
            <input type="text" onSubmit={addGoalHandler}/>
            <button type="submit">Add Goal</button>
        </form>
    )
}

export default NewGoal

Can anyone please help me find the error?

My expected output is to get a text on my window with text as Dummy Goal when i click Add Goal button.