On upgrading to v5 of `@what3words/react-components`, `What3wordsAddress` no longer renders

[eloisetaylor5693]

I'm sure this isn't the correct place for my query, but couldn't find a more suitable repo, and the support pages/my account didn't seem to link to any support contact forms

I'm using @what3words/react-components in my gatsby project.

Code

import { What3wordsAddress } from "@what3words/react-components";

<What3wordsAddress
  words={meetingPointWhatThreeWords}
  icon-color="#0e4630"
  text-color="#0e4630"
  tooltip-location={meetingPointDescription}
  rel="noopener noreferrer"
/>

Package versions

Working version: "@what3words/react-components": "4.0.5",

Not working in this version: "@what3words/react-components": "5.0.0",

What it looks like:

When working

<what3words-address words="a.b.c" icon-color="#0e4630" text-color="#0e4630" tooltip-location="description of location"
    rel="noopener noreferrer" class="hydrated">
    
    <a href="https://map.what3words.com/a.b.c" target="_blank" class="what3words-address notranslate" style="font-size: 24px">
        <div class="what3words-tooltip-container">
            <div class="what3words-tooltip">
                what3words gives every 3m x 3m in the world a unique 3 word address.
                This one describes the precise location.
                <a href="https://map.what3words.com/a.b.c" target="_blank">View on map</a>
            </div>
        </div>
        <div class="what3words-address_container">
            <what3words-symbol class="hydrated">
                <svg 
                    viewBox="0 0 32 32" 
                    class="what3words-logo"
                    style="color: rgb(14, 70, 48); width: 30px; height: 30px" 
                    data-testid="what3words-symbol">
                    <path fill="currentColor" d="M10.7,4h2L4,28H2L10.7,4z M19.7,4h2L13,28h-2L19.7,4z M28.7,4h2L22,28h-2L28.7,4z"></path>
                </svg>
            </what3words-symbol>
            <span class="what3words-address_text" style="color: rgb(14, 70, 48)">a.b.c</span>
        </div>
    </a>
</what3words-address>

Not working

After updating the package, the component doesn't show in the UI, and the element is present in the HTML. The html is much smaller:

<what3words-address words="a.b.c" icon-color="#0e4630" text-color="#0e4630" tooltip-location="description of location" rel="noopener noreferrer"></what3words-address>

[mewejo]

Vue doesn’t seem to work either