Invariant Violation: View config getter callback for component `g` must be a function (received `undefined`)

Question

The whole message is

Invariant Violation: View config getter callback for component `g` must be a function (received `undefined`). Make sure to start component names with a capital letter.

This error is located at:
    in g
    in VictorySharedEvents (created by Chart)
    in RNSVGGroup (created by G)
    in G (created by Svg)
    in RNSVGSvgView (created by Svg)
    in Svg (created by Cchart)
    in RCTView (created by View)
    in View (created by Cchart)
    in Cchart (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

The funny thing is this code work totally fine in expo snack online but doesn't work on iOS simulator. I And there's no lower letter 'g' in my code. so confused.

<Chart.js>

import Svg, { G } from 'react-native-svg';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictorySharedEvents, VictoryPie, VictoryLabel } from 'victory-native';
import * as React from 'react';

export default function Chart {
  return (
    <Svg viewBox="0 0 550 750">
      <VictorySharedEvents
        events={[{
          childName: ["pie", "bar"],
          target: "data",
          eventHandlers: {
          onMouseOver: () => {
            return [{
              childName: ["pie", "bar"],
              mutation: (props) => {
                return {
                  style: Object.assign({}, props.style, {fill: "silver"})
                };
              }
            }];
           },
          onMouseOut: () => {
            return [{
              childName: ["pie", "bar"],
              mutation: () => {
                return null;
              }
            }];
          }
        }
     }]}
   >
   <G transform={"translate(150, 220)"}>
     <VictoryLabel
           x={180}
           y={45}
           textAnchor="middle"
           style={{fontSize: 10}}
           text="Co2 Emission per kg"
     />
     <VictoryBar name="bar"
      width={220}
      standalone={false}
      style={{
       data: {
         fill: ({ datum }) => datum.fill,
         opacity: ({ datum }) => datum.opacity
         },
      }}
     data={[
       { itemName: "Butter", label: "Butter", amount: 1, emission: 11.92, fill: "#FFAAA6" },
       { itemName: "Beef", label: "Beef", amount: 1, emission: 26.45, fill: "#FFD3B5" },
       { itemName: "Beans", label: "Beans", amount: 1, emission: 0.73, fill: "#A8E6CE" },
       { itemName: "Selfish", label: "Selfish", amount: 1, emission: 4.11, fill: "chocolate"}
      ]}
      x="itemName"
      y={(d) => (d.amount * d.emission)}
    />
   </G>
   <G transform={"translate(110, -45)"}>
    <VictoryPie name="pie"
      width={250}
      standalone={false}
      style={{
         data: {
           fill: ({ datum }) => datum.fill,
           opacity: ({ datum }) => datum.opacity
         }
      }}
      data={[
          { itemName: "Butter", label: "Butter", amount: 1, emission: 11.92, fill: "#FFAAA6" },
         { itemName: "Beef", label: "Beef", amount: 1, emission: 26.45, fill: "#FFD3B5" },
         { itemName: "Beans", label: "Beans", amount: 1, emission: 0.73, fill: "#A8E6CE" },
         { itemName: "Selfish", label: "Selfish", amount: 1, emission: 4.11, fill: "chocolate"}
    
    ]}
    x="itemName"
    y={(d) => (d.amount * d.emission)}
   />
   </G>
  </VictorySharedEvents>
 </Svg>
 );
}

<App.js>

import { StyleSheet, Text, View } from 'react-native';
import Chart from './Chart';
import * as React from 'react';

export default function App() {
   return (
      <View style={styles.container}>
        <Chart />
      </View>
   );
}

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });