Append “Add New” button in Grid Listing, on a Form

A custom module has Foo and Bar Models. In the Foo element’s Form, there exists a grid listing of Bar items which belong to that Foo. This is an excerpt from the view/adminhtml/ui_component/bf_foo_form.xml file:

<insertListing name="bf_foo_form_bar_grid">
    <settings>
        <externalProvider>bf_foo_form_bar_grid.bf_foo_grid_data_source</externalProvider>
        <loading>false</loading>
        <autoRender>true</autoRender>
        <dataScope>bf_foo_form_bar_grid</dataScope>
        <ns>bf_foo_form_bar_grid</ns>
        <imports>
            <link name="foo_id">${ $.provider }:data.foo_id</link>
        </imports>
        <exports>
            <link name="foo_id">${ $.externalProvider }:params.foo_id</link>
        </exports>
    </settings>
</insertListing>

This is an excerpt from the view/adminhtml/ui_component/bf_foo_form_bar_grid.xml file where I try to add the Add new Bar button:

<settings>
    <spinner>listing_columns</spinner>
    <deps>
        <dep>bf_foo_form_bar_grid.bf_foo_grid_data_source</dep>
    </deps>
    <buttons>
        <button name="add">
            <url path="*/bar/new"/>
            <class>primary</class>
            <label translate="true">Add new Bar</label>
        </button>
    </buttons>
</settings>

As that code did not add the Add new Bar button, I tried another approach in the same view/adminhtml/ui_component/bf_foo_form_bar_grid.xml file:

<argument name="data" xsi:type="array">
    <item name="buttons" xsi:type="array">
        <item name="new_bar" xsi:type="array">
            <item name="name" xsi:type="string">new_bar</item>
            <item name="label" xsi:type="string">Add new Bar</item>
            <item name="class" xsi:type="string">secondary</item>
            <item name="url" xsi:type="string">*/bar/new</item>
        </item>
    </item>
</argument>

However, that did not work either! This is a screenshot of a Foo item, with a Bar item below, and the place where I’d like to add the Add new Bar button: