как визуализировать контент в компоненте, который загружается с помощью useEffect- React

Насколько я понимаю ваш вопрос, вы спрашиваете, как визуализировать компоненты MenuItemHolder только тогда, когда данные были извлечены, и состояние было заполнено этими данными.

Этого можно добиться двумя способами:

# 1 Инициализируйте menuItems.records пустым массивом:

const [ menuItems, setMenuItems ] = useState({records: []});

так что при первоначальном рендеринге menuItems.records.map([...]) вернет пустой.

# 2 Визуализируйте MenuItemHolder компоненты в соответствии с условием:

<Row>
    {menuItems && menuItems.records.map((item) => (
        <MenuItemHolder name={item.Name} price={item.UnitPrice} />
    ))}
</Row>

Это будет работать, поскольку начальное значение menuItems равно false.

Вы можете инициализировать menuItems заранее, поэтому доступ к menuItems.records будет действительным.

const Menu = () => {
  const [menuItems, setMenuItems] = useState({ records: [] });

  useEffect(() => {
    //...
    fetchData();
  }, []);

  // records are empty until data fetch
  return (
    <>
      {menuItems.records.map((item) => {
        /*...*/
      })}
    </>
  );
};

export default Menu;

Или просто используйте условный рендеринг:

const Menu = () => {
  const [menuItems, setMenuItems] = useState();

  useEffect(() => {
    //...
    fetchData();
  }, []);

  // Conditional rendering
  return (
    <>
      // Same as menuItems && menuItems.records
      {menuItems?.records.map((item) => {
        /*...*/
      })}
    </>
  );
};

export default Menu;

Добавьте состояние loading для визуализации элемента загрузки, пока fetchData получает данные с сервера.

import React, { useEffect, useState } from 'react';
import Layout from '../components/global/layout/Layout';
import axios from 'axios';
import { Col, Row } from 'react-bootstrap';
import styles from '../components/page-css/menu.module.css';
import MenuItemHolder from '../components/menu-page/menuItemHolder/menuItemHolder';

const Menu = () => {
    const [ loading, setLoading ] = useState(false);
    const [ menuItems, setMenuItems ] = useState({records: []});

    const fetchData = async () => {
        setLoading(true);
        const result = await axios('https://tahina-test.herokuapp.com/doggos');
        setLoading(false);
        setMenuItems(result.data);
    };

    useEffect(() => {
        fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <Layout textColor="white">
            <Col>
                <Row className={styles.menuHolder}>
                    {loading ? (
                       <Col className={styles.menu} xs="11" md="8">
                            Loading, please wait...
                       </Col>
                    ) : (
                        <Col className={styles.menu} xs="11" md="8">
                            <h1>Menu</h1>
                        
                            {menuItems.records.map((item, index) => (
                                <Row key={index}>
                                    <MenuItemHolder name={item.Name} price={item.UnitPrice} />
                                </Row>
                            ))}

                        </Col>
                    )}
                </Row>
            </Col>
        </Layout>
    );
};

export default Menu;