localhostではなく別の名前で接続したい

Question

Dockerとapacheを使ってWebサーバーを立てています。
無事 http://localhost と打てばLaravelの画面を見れるようになったのですが、
これを http://localhost ではなく http://hoge.test と打ってアクセスできるようにしたいです。

調べたところ、extra_hosts を利用すれば hoge.testを割り当てられそうと考え、
下記のようにdockerファイルを編集しました。

$ docker-compose exec app bash から etc/hosts を覗くと確かに 127.0.0.1 にhoge.testがありますが、
http://hoge.test/ にアクセスすると DNS_PROBE_FINISHED_NXDOMAIN を返されてしまいます。
hoge.test のIPを127.0.0.2などに変更すると ERR_CONNECTION_TIMED_OUT となってしまいます。

コンテナ上ではなく、OS側のターミナルから etc/hostsを編集すると反映はされますが、
他のWebサーバとのDNSを分けたいため困っております。

そもそもdockerでローカルの接続先を変える時は、extra_hosts を追記するというアプローチでいいのでしょうか。
よろしくお願いいたします。

---

docker-compose.yml

version: '3'
services:
  app:
    build: ./docker
    extra_hosts:
      - "hoge.test:127.0.0.1"
    ports:
      - 80:80
    volumes:
      - ./app:/var/www/app
    working_dir: /var/www/app

FROM php:8.0-apache
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
RUN apt-get update && apt-get install -y git \
    && docker-php-ext-install pdo_mysql \
    # 追加分
    && apt-get install -y vim \
    && apt-get install -y iputils-ping net-tools

RUN sed -i 's!/var/www/html!/var/www/app/public!g' /etc/apache2/sites-available/000-default.conf

バージョン
Docker version 20.10.12, build e91ed57
MacOS Monterey 12.1 Apple M1 Pro