[Bug] Attribution is not getting rendered correctly

[nbroeking]

Description

The Map component does not render attribution correctly when using the latest version of libraries. There are several issues.

• Attribution is missing the copywrite symbols
• Attribution is pushed off the map. If you set the map height to be 100% you won't see the attribution as it will be off screen. If you set map height to be 90% you will see the attribution off the bottom of the map.

Attached are pictures of how the attribution is getting rendered with the latest versions.

Expected Behavior

You would expect to see the attribution in a similar style as the this boiler plate

Steps to Reproduce

Option 1 - I have the repo -> https://github.com/nbroeking/mapbox-bug

Option 2 - Recreate from scratch

npx create-react-app test
cd test
npm install --save react-map-gl mapbox-gl
Replace App.js with below code
Replace the App.css with the below css code. 
yarn start

App.js

import React from 'react';
import './App.css';

import Map, {NavigationControl, AttributionControl} from 'react-map-gl';

export default function App() {
  const MAPBOX_ACCESS_TOKEN =
    "My Super Fancy Key";

  return (
    <div id='app'>
      <Map
        initialViewState={{
          latitude: 40,
          longitude: -74.5,
          zoom: 12
        }}
        style={{width: '100%', height: '90%'}}
        mapStyle="mapbox://styles/mapbox/outdoors-v12"
        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
        attributionControl={true}
      >
      </Map>
    </div>
  );
}

App.css

.App {
  text-align: center;
}

#app {
  height:100vh;
  width: 100vw;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Environment

• Framework version: "react-map-gl": "^7.0.23"
• Map library: "mapbox-gl": "^2.14.1",
• Browser: Chrome Version 113.0.5672.92 (Official Build) (x86_64)
• OS: Ventura
• Node.Js: v18.16.0
• npm: 9.5.1
• npx: 9.5.1

Logs

No errors

[Pessimistress]

https://visgl.github.io/react-map-gl/docs/get-started/get-started#styling