Storefront homepage hooks not working

Hello!

I have turned on in customization for the store front page to show categories and products. Now I would like to be able to wrap the categories in a div so that they’re somewhat separate from the products list. As it’s now, they’re in one div all together
<ul class="products columns-3">

So I’ve been trying a various amount of hooks to output div HTML before and after the categories, but to no avail. These are the ones I have tried:
storefront_homepage_before_product_categories
storefront_homepage_after_product_categories_title
storefront_homepage_after_product_categories
as according to this page on the docs: https://docs.woocommerce.com/document/storefront-hooks-actions-filters/#section-5

Ex. of my use:

function custom_storefront_homepage_after_product_categories_title(){
echo '<div class="product-categories-wrapper">';
}
add_action('storefront_homepage_after_product_categories_title', 'custom_storefront_homepage_after_product_categories_title', 20);

According to that page, the first hook is supposed to be “Executed before the <section class=”storefront-product-categories”> homepage section”. However, on inspecting the HTML of the page, there is no such section. There’s only the
<ul class="products columns-3"> where products and product categories are listed together.

So, am I missing something? What hooks are supposed to be used with this?