Changing color on layer React-Mapbox-gl

Question

I am new to React-mapbox GL. I have tried for a while now to look at the examples but can't figure out how to change the layer's color on enter/hover. I have 2 questions so far.

map.on('mouseenter', 'clusters', () => {
map.getCanvas().style.cursor = 'pointer';
});

How can I define the the cluster element for each function in Reactmapbox gl? I don't quite understand how the interactiveLayerIds works I suppose?

question 2.

const onMouseEnter = useCallback(event =>{
    if (event.features[0].layer.id==="unclustered-point"){
      /* console.log(event.features[0].layer.paint.'circle-color') */
    }
  })

I have attempted this so far(the whole code is below) but it tells me that circle-color is a unexpected token. OnEnter this unclustered-point layer I want to change the color of the element so the user can clearly see what element they are hovering over? How would I go about doing this in React mapbox gl if I cant change the circle color?

THE WHOLE CODE:

import React, { useContext, useEffect, useRef,useState,useCallback } from 'react';
import './MapViews.css';
import { useNavigate } from 'react-router-dom';
import ReactMapGL, { Marker, Layer, Source } from 'react-map-gl';
import SourceFinder from '../../Apis/SourceFinder';
import { SourceContext } from '../../context/SourceContext';
import { clusterLayer, clusterCountLayer, unclusteredPointLayer } from './Layers';
const MapView = () => {
  const navigate = useNavigate()
  const { sources, setSources } = useContext(SourceContext)
  const [viewport, setViewport] = React.useState({
    longitude: 10.757933,
    latitude: 59.91149,
    zoom: 12,
    bearing: 0,
    pitch: 0
  });
  const mapRef = useRef(null);
  
  function getCursor({isHovering, isDragging}) {
    return isDragging ? 'grabbing' : isHovering ? 'pointer' : 'default';
  }
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await SourceFinder.get("/sources");
        setSources(response.data.data.plass);
      } catch (error) { }
    };
    fetchData();
  }, [])
  
  const onMouseEnter = useCallback(event =>{
    if (event.features[0].layer.id==="unclustered-point"){
      /* console.log(event.features[0].layer.paint.'circle-color') */
    }
  })
  const ShowMore = event => {
    if(event.features[0].layer.id==="unclustered-point"){
      const feature = event.features[0];
      console.log(feature)
      mapRef.current.getMap().getCanvas().style.cursor="pointer"
    }else{
    const feature = event.features[0];
    const clusterId = feature.properties.cluster_id;
    const mapboxSource = mapRef.current.getMap().getSource('stasjoner');
    mapboxSource.getClusterExpansionZoom(clusterId, (err, zoom) => {
      if (err) {
        return;
      }
      setViewport({
        ...viewport,
        longitude: feature.geometry.coordinates[0],
        latitude: feature.geometry.coordinates[1],
        zoom,
        transitionDuration: 500
      });
    });
  }
  };
  return (
    <ReactMapGL  {...viewport} width="100%" height="100%" getCursor={getCursor} onMouseEnter={onMouseEnter} interactiveLayerIds={[clusterLayer.id,unclusteredPointLayer.id]} mapboxApiAccessToken={"SECRET"} clickRadius={2} onViewportChange={setViewport} mapStyle="mapbox://styles/mapbox/streets-v11" onClick={ShowMore} ref={mapRef}>
      <Source id="stasjoner" type="geojson" data={sources} cluster={true} clusterMaxZoom={14} clusterRadius={50}  >
        <Layer {...clusterLayer} />
        <Layer {...clusterCountLayer} />
        <Layer {...unclusteredPointLayer}/>
      </Source>
    </ReactMapGL>

  );
};

export default MapView;

LAYERS.JS

//Hvergang vi skal ha 2 eller flere baller
export const clusterLayer = {
    id: 'clusters',
    type: 'circle',
    source: 'stasjoner',
    filter: ['has', 'point_count'],
    paint: {
      'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 500, '#f28cb1'],
      'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
      
    }
  };
  //Dette er tallene som er inne i ballene
  export const clusterCountLayer = {
    id: 'cluster-count',
    type: 'symbol',
    source: 'stasjoner',
    filter: ['has', 'point_count'],
    layout: {
      'text-field': '{point_count_abbreviated}',
      'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
      'text-size': 12,
    }
  };
  
  //Per punkt
  export const unclusteredPointLayer = {
    id: 'unclustered-point',
    type: 'circle',
    source: 'stasjoner',
    filter: ['!', ['has', 'point_count']],
    paint: {
      'circle-color': '#11b4da',
      'circle-radius':  8,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#fff',
    }
  };