Different color for one feature in MapboxDraw

Question

So I have this component of mine

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { useControl } from 'react-map-gl';
import React, { useRef, useEffect, useContext } from 'react';
import UserContext from '@/lib/contexts/user-context';
import { createGeojsonFeatureCollection } from '@/lib/diligence-helpers';
import type { ControlPosition } from 'react-map-gl';
import { getFeatureCollection } from '@/lib/utils';

type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
  position?: ControlPosition;
  onCreate?: (evt: { features: object[] }) => void;
  onUpdate?: (evt: { features: object[]; action: string }) => void;
  onDelete?: (evt: { features: object[] }) => void;
  aois: GeoJSON.FeatureCollection[] | undefined;
  unsavedAois?: GeoJSON.FeatureCollection | undefined;
};

export default function DrawControl({
  onCreate = () => { },
  onUpdate = () => { },
  onDelete = () => { },
  aois,
  unsavedAois,
  ...props
}: DrawControlProps) {
    const { currentProject } = useContext(UserContext);
  const drawInstanceRef = useRef<MapboxDraw | null>(null);
  useControl<MapboxDraw>(
    () => {
        console.log("In use control")
        const drawInstance = new MapboxDraw(props);
        drawInstanceRef.current = drawInstance;
      return drawInstance;
    },
    
    ({ map }) => {
      map.on('draw.create', onCreate);
      map.on('draw.update', onUpdate);
      map.on('draw.delete', onDelete);
    },
    ({ map }) => {
      map.off('draw.create', onCreate);
      map.off('draw.update', onUpdate);
      map.off('draw.delete', onDelete);
    },
    {
      position: props.position,
    }
  );
  useEffect(() => {
    const currentDrawings = drawInstanceRef.current?.getAll();
    if (currentDrawings) {
      const currentDrawingIds = currentDrawings.features.map(feature => feature.id);
      const aoisIds = aois?.flatMap(fc => fc.features?.map(feature => feature.id)) || [];
      const unsavedAoisIds = unsavedAois?.features.map(feature => feature.id) || [];
      const validIds = [...aoisIds, ...unsavedAoisIds];
      const idsToDelete = currentDrawingIds.filter(id => !validIds.includes(id))

      if (idsToDelete) {
        idsToDelete.forEach(id => {
          if (id) {
            drawInstanceRef.current?.delete(id.toString());
          }
        });
      }
      aois?.forEach(aoi => {
        aoi.features?.forEach(feature => {
          if (!currentDrawingIds.includes(feature.id)) {
            drawInstanceRef.current?.add(getFeatureCollection(aoi));
          }
        })
      });
    }
  }, [aois, unsavedAois, currentProject]);


  return null;
}

So In this I am adding multiple areas of interests in drawInstanceRef, and one of them will surely be in currentProject context value that I have extracted. Now by default all areas are shown in blue color but I want to achieve that when it draws the area of currentProject it should have a different color. How can I achieve that, thank you