When passing font to CartesianChart, it produce this error

Error: Exception in HostFunction: Value is undefined, expected a number

My implementation has two y axis bars per x value.
Data is fetched correctly.

I tried it with many charts and when passing the font, it gives the error.
I’m using react native with expoexpo SDK – 50.0.11

import { useFont, LinearGradient, vec } from '@shopify/react-native-skia';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { View } from 'react-native';
import { BarGroup, CartesianChart } from 'victory-native';

import { appColors } from './appColors';

import inter from '../../../../../../assets/fonts/inter-medium.ttf';

interface CampaignSummary {
  campaignName: string;
  convertedLeadCount: number;
  totalLeadCount: number;
}

const LeadCampaignSummary = () => {
  const [data, setData] = useState<CampaignSummary[]>([]);

  // const [fontsLoaded] = useExpoFont({
  //   abelRegular: require('../../../../../../assets/fonts/abel-regular.ttf'),
  // });

  const font = useFont(inter, 12);

  useEffect(() => {
    const fetchCampaignSummary = async () => {
      try {
        const response = await axios.get(
          'lead-conversion-history',
        );
        setData(response.data);
      } catch (error) {
        console.log('Error fetching lead campaign summary:', error);
      }
    };

    fetchCampaignSummary();
  }, []);

  const campaignData = data.map((item: CampaignSummary) => ({
    campaignName: item.campaignName,
    convertedLeadCount: item.convertedLeadCount,
    totalLeadCount: item.totalLeadCount,
  }));

  return (
    <View style={{ height: 300, width: 300 }}>
      <CartesianChart
        data={campaignData}
        xKey="campaignName"
        yKeys={['convertedLeadCount', 'totalLeadCount']}
        domain={{ y: [0, 50] }}
        padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
        domainPadding={{ left: 50, right: 50, top: 30 }}
        axisOptions={{
          font,
          tickCount: { y: 10, x: 5 },
          lineColor: '#d4d4d8',
          labelColor: appColors.text.light,
        }}
      >
        {({ points, chartBounds }) => (
          <BarGroup chartBounds={chartBounds} betweenGroupPadding={0.3} withinGroupPadding={0.1}>
            <BarGroup.Bar points={points.convertedLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#c084fc', '#7c3aed90']}
              />
            </BarGroup.Bar>
            <BarGroup.Bar points={points.totalLeadCount} animate={{ type: 'timing' }}>
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 500)}
                colors={['#a5f3fc', '#0891b290']}
              />
            </BarGroup.Bar>
          </BarGroup>
        )}
      </CartesianChart>
    </View>
  );
};

export default LeadCampaignSummary;

I tries expo-font and @expo-google-fonts. Everytime i try to use it with font, produce that specific error.