Mapbox Hover with React - reactjs

Question

I am having trouble getting the hover functionality to work with mapbox using React JS.
This code is taken from the Mapbox documentation found here Mapbox Documentation hover and I have just substituted in my data.
My code is the following and there is a snippet of the JSON data below that.
I have set up a sandbox environment here -Hover Sandbox
mapboxgl.accessToken =
"pk.eyJ1IjoicGJyb2NrbWFubiIsImEiOiJjajgxbnlqbGg2enR4MnhxbXllaHYzOGNzIn0.mA9mk90HM6ePh0gQq_55yw";
const HoverMap = () => {
const mapContainer = useRef();
const [map, setMap] = useState(undefined);
const zoom = 12.2;
useEffect(() => {
// Creating the map
setMap(
new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/streets-v12",
center: [151.89, -33.830348],
zoom: 7,
})
);
}, []);
let hoveredStateId = null;
useEffect(() => {
if (typeof map === "undefined") return;
map.on("load", () => {
map.addSource("RandwickCityCouncil", {
type: "geojson",
data: RandwickCC,
});
map.addLayer({
id: "RandwickCityCouncil-fills",
type: "fill",
source: "RandwickCityCouncil",
layout: {},
paint: {
"fill-color": "#627BC1",
"fill-opacity": [
"case",
["boolean", ["feature-state", "hover"], false],
1,
0.2,
],
},
});
map.addLayer({
id: "RandwickCityCouncil-outline",
type: "line",
source: "RandwickCityCouncil",
layout: {},
paint: {
"line-color": "#f50202",
"line-width": 2,
},
});
// Hover effect
map.on("mousemove", "RandwickCityCouncil-fills", (e) => {
if (e.features.length > 0) {
if (hoveredStateId !== null) {
map.setFeatureState(
{ source: "RandwickCityCouncil", id: hoveredStateId },
{ hover: false }
);
}
hoveredStateId = e.features[0].id;
map.setFeatureState(
{ source: "RandwickCityCouncil", id: hoveredStateId },
{ hover: true }
);
}
});
map.on("mouseleave", "RandwickCityCouncil-fills", () => {
if (hoveredStateId !== null) {
map.setFeatureState(
{ source: "RandwickCityCouncil", id: hoveredStateId },
{ hover: false }
);
}
hoveredStateId = null;
});
});
}, [map]);
return (
<div>
{/* <MapToolbar> Map Toolbar </MapToolbar> */}
<div className="mapbox" ref={mapContainer} />
</div>
);
};
export default HoverMap;
The map renders and displays the opaque fill (0.2) but when I hover with the mouse it doesn't transition to a fill of (1).
My JSON data looks like this.
{
"type": "FeatureCollection",
"name": "RandwickCityCouncil",
"crs": {
"type": "name",
"properties": { "name": "urn:ogc:def:crs:EPSG::4283" }
},
"features": [
{
"type": "Feature",
"properties": {
"csId": "RCC-20221116103310",
"cadid": "108012496",
"lganame": "RANDWICK",
"councilnam": "RANDWICK CITY COUNCIL",
"abscode": 6550.0,
"supplydate": "2022-11-16"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[151.237223263119546, -33.890750241364117],
[151.237312069267318, -33.890752670602645],
[151.237401162262444, -33.890752374791312],
[151.237490291113488, -33.890749344966139],
[151.237579204829018, -33.890743625947039],
[151.237667643453619, -33.890735199806031],....