Isometric Rendering Doesn't Align

I've been starting to experiment with 2D rendering, in particular isometric rendering. So far I've been having issues getting my tiles to line up. I am currently writing this in Rust using the Bevy engine.

Here is my Cartesian to isometric coordinate conversion function:

pub fn to_isometric(cartesian_coordinates: Vec3, map_tile_width: f32, map_tile_height: f32) -> Vec3 {
Vec3 {
    x: (cartesian_coordinates.y * map_tile_width / 2.0) + (cartesian_coordinates.x * map_tile_width / 2.0),
    y: ((cartesian_coordinates.x * map_tile_height / 2.0) - (cartesian_coordinates.y * map_tile_height / 2.0)),
    z: cartesian_coordinates.z
    }
}

Below is the code used to spawn the tiles into the world:

pub fn world_setup(
mut commands: Commands,
asset_server: Res<AssetServer>) {

let grass_sprite = asset_server.load("./textures/grass_block.png");
let dirt_sprite = asset_server.load("./textures/dirt_brick.png");

let mut rng = rand::thread_rng();
for x in -10..10 {
    for y in -10..10 {
        let z = 0;
        if rng.gen_bool(0.7) {
            commands.spawn(
                StaticBundle::new(
                    crate::util::math::to_isometric(Vec3::new((x) as f32, (y) as f32, z as f32), 32.0, 32.0),
                    Thing::Grass,
                    grass_sprite.clone()
                )
            );
        }
        else {
            commands.spawn(
                StaticBundle::new(
                    to_isometric(Vec3::new(x as f32, y as f32, z as f32), 32.0, 32.0),
                    Thing::Dirt,
                    dirt_sprite.clone()
                    )
                );
            }
        }
    }
}

Here is what an individual tile look like:

Below is an image of what my current rendering looks like.

Any ideas why the tiles are not rendering as a smooth diamond of tiles? I'm looking for something like this: