Визуализировать дочерний компонент после добавления данных в состояние

Я новичок в React и работаю над приложением React Redux. Когда я добавляю новый элемент в состояние, я хочу отобразить дочерний компонент, который показывает список элементов. В настоящее время список элементов отображается в состоянии, и новый элемент также добавляется в этот список (mobileList). Как я могу визуализировать дочерний компонент, когда в состояние добавляется новый элемент? В настоящее время дочерний компонент ничего не показывает.

Родительский компонент

import React, { useEffect, useState ,ComponentState} from "react";
import { useSelector, useDispatch } from "react-redux";
import { Button, Container, Row, Col, Form } from "react-bootstrap";
import uuid from "react-uuid";
import allActions from '../Actions/index'
import MobileList from './MobileList';

const MobileCreation = () => {
  const dispatch = useDispatch();

  const initialMobileState = {
    id: "",
    modelName: "",
    brand: "",
    year: "",
    price: "",
  };

  const [mobile, setMobile] = useState(initialMobileState);
  const [submitted, setSubmitted] = useState(false);
  const [submitSuccesful, setSubmitSuccesful] = useState(false);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setMobile({ ...mobile, [name]: value });
  };

  const saveMobile = (event) => {
    event.preventDefault();
    setSubmitted(true);

    if (mobile.modelName && mobile.brand && mobile.year && mobile.price) {
      var data = {
        Id: uuid(),
        ModelName: mobile.modelName,
        Brand: mobile.brand,
        Year: mobile.year,
        Price: mobile.price,
      };
    }

   dispatch(allActions.MobileActions.save(data));
   setSubmitted(false);
   setMobile(initialMobileState);
  };

  return (
      <>
    <Form onSubmit = {saveMobile}>
      <Form.Group controlId = "mobile.ModelName">
        <Form.Label>Model Name</Form.Label>
        <Form.Control
          type = "text"
          placeholder = "Enter model name"
          name = "modelName"
          value = {mobile.modelName}
          onChange = {handleInputChange}
        />
        {submitted && !mobile.modelName && <div>Model name is required</div>}
      </Form.Group>
      <Form.Group controlId = "mobile.Brand">
        <Form.Label>Brand Name</Form.Label>
        <Form.Control
          type = "text"
          placeholder = "Enter Brand name"
          name = "brand"
          value = {mobile.brand}
          onChange = {handleInputChange}
        />
        {submitted && !mobile.brand && <div>Brand name is required</div>}
      </Form.Group>
      <Form.Group controlId = "mobile.Year">
        <Form.Label>Year</Form.Label>
        <Form.Control
          type = "text"
          placeholder = "Enter year"
          name = "year"
          value = {mobile.year}
          onChange = {handleInputChange}
        />
        {submitted && !mobile.year && <div>Year is required</div>}
      </Form.Group>
      <Form.Group controlId = "mobile.Price">
        <Form.Label>Price</Form.Label>
        <Form.Control
          type = "text"
          placeholder = "Enter price"
          name = "price"
          value = {mobile.price}
          onChange = {handleInputChange}
        />
        {submitted && !mobile.price && <div>Price is required</div>}
      </Form.Group>
      <Button variant = "primary" type = "submit">
        Submit
      </Button>
    </Form>
    <MobileList/>
    </>
  );
};

export default MobileCreation;

Дочерний компонент

import React, { useEffect } from "react";
import { useSelector, useDispatch ,} from "react-redux";
import Table from 'react-bootstrap/Table'

const MobileList = () => {
  const mobileList = useSelector((state) => state.mobileList);

  return (
    <>
      <Table striped bordered hover size = "sm">
        <thead>
          <tr>
            <th>Model Name</th>
            <th>Brand Name</th>
            <th>Year</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{mobileList ? 
             mobileList.map(function(item, i){
            <tr>
                <td>item.ModelName</td>
                <td>item.Brand</td>
                <td>item.Year</td>
                <td>item.Price</td>
            </tr>
            }) :
           <tr>
               <td>No data</td>
           </tr>
        
            }
        </tbody>
      </Table>
    </>
  );
};

export default MobileList;

Редуктор

const initialMobileListState = {
    mobileList:[]
}


const mobileReducer= (state = initialMobileListState, action) => {
    switch(action.type){
        case "SAVE":
            return {
                ...state,
                mobileList:[...state.mobileList, action.mobile]
            }
        case "FAIL":
            return state 
        default: 
            return state
    }
}

export default mobileReducer