How to conditionally render stroke color in React w/ Fluent UI & react-hooks?

Here props.data!.lineChartData![0].color! can be optional, so what to modify in code such that if it is defined then it should render stroke color from props.data!.lineChartData![0].color! else from sam.line stroke where sam=useSample(), Please check the photo for code tried before.
use of makestyle
provided by griffel library

    export const SparklineBase = (props: ISparklineProps) => {
  const myclass = useClasses();
  const mycolor = useColorStyles();
  const sam = useSample();
  const margin = React.useRef({
    top: 2,
    right: 0,
    bottom: 0,
    left: 0,
  });
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const x = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const y = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const area = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const line = React.useRef<any>();
  const [_points, setPoints] = React.useState<ILineChartDataPoint[] | null>(null);
  const [_width] = React.useState<number>(props.width! || 80);
  const [_height] = React.useState<number>(props.height! || 20);
  const [_valueTextWidth] = React.useState<number>(props.valueTextWidth! || 80);
  React.useEffect(() => {
    area.current = d3Area()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      .y0(_height)
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y1((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    line.current = d3Line()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    const points = props.data!.lineChartData![0].data;
    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);
    x.current = d3ScaleLinear()
      .domain([xMin, xMax])
      .range([margin.current.left!, _width - margin.current.right!]);
    y.current = d3ScaleLinear()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .domain([0, d3Max(points, (d: any) => d.y)])
      .range([_height - margin.current.bottom!, margin.current.top!]);
    setPoints(points);
  }, [_height, _width, props.data]);
  const drawSparkline = React.useCallback(() => {
    const strokeColor = props.data!.lineChartData![0].color || mycolor[1];
    const fillColor = props.data!.lineChartData![0].color || mycolor[2];
    // const a = mergeClasses(props.data!.lineChartData![0].color, sam.line);
    return (
      <>
        <path
          className={` ${strokeColor}`}
          // className={sam.line}
          d={line.current(_points)}
          fill={'transparent'}
          opacity={1}
          strokeWidth={2}
          stroke={props.data!.lineChartData![0].color!}
        />
        <path
          className={` ${fillColor}`}
          // className="area"
          d={area.current(_points)}
          opacity={1}
          fillOpacity={0.2}
          fill={props.data!.lineChartData![0].color!}
          aria-label={`Sparkline with label ${props.data!.lineChartData![0].legend!}`}
        />
      </>
    );
  }, [_points, mycolor, props.data, sam.line]);
  const classNames = getClassNames(props.styles!, {
    theme: props.theme!,
  });

I tried hooks like this but it only surrounds with color.Tried Solution using makestyle function provided by griffel