Bootstrap 5.3.3 "offcanvas" is rendering visible and inline when I attempt to use any of the size-altering annotations

In my Blazor application page, I have this:

<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="myOffcanvas" tabindex="-1" aria-labelledby="myOffcanvasLabel"><div class="offcanvas-header"><!-- stuff here --></div><div class="offcanvas-body"><!-- stuff here --></div></div>

This works as expected as I have it above. The problem happens when I change this:

<div class="offcanvas"

To any of these:

<div class="offcanvas-sm"<div class="offcanvas-md"<div class="offcanvas-lg"<div class="offcanvas-xl"<div class="offcanvas-xxl"

Then navigate to that page, the offcanvas div is not hidden, or off to the side, it is rendered inline with the rest of the content on that page, in my case at the top of the page.

When I change it back to this:

<div class="offcanvas"

Everything works perfectly again.

Has anybody else run into this? How can I fix this?