I am trying to use the grid component in my react native project with expo, but the grid does not behave as it should, it always behaves as seen in the screenshot, am I doing something wrong?

Copy paste from docs:

import { Grid, GridItem } from "@/components/ui/grid";
import { Text } from "@/components/ui/text";
    
function Example() {
  return (
    <Grid className="gap-4" _extra={{
      className: 'grid-cols-9',
    }}>
      <GridItem
        className="bg-background-50 p-3 rounded-md text-center"
        _extra={{
      className: 'col-span-3',
    }}
      >
        <Text>A</Text>
      </GridItem>
       <GridItem
        className="bg-background-50 p-3 rounded-md text-center"
        _extra={{
      className: 'col-span-3',
    }}
      >
        <Text>B</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-3 rounded-md text-center"
        _extra={{
      className: 'col-span-3',
    }}
      >
        <Text>C</Text>
      </GridItem>
    </Grid>
  );
}