Isometric hexagonal tilemap

Question

I want to create an isometric tilemap with hexagons instead of squares, like in the image:

How would one achieve this? I'm having problem with positioning the tiles correctly, as well as detecting which tile is clicked.

Simply using IsometricTileMapComponent with hexagon tiles causes the tiles to overlap incorrectly.

One possible solution is to extend the IsometricTileMapComponent and override the appropriate methods, primarily (I think) the following two:

/// Get which block's surface is at isometric position [p].
///
/// This can be used to handle clicks or hovers.
/// This is the opposite of [getBlockCenterPosition].
Block getBlock(Vector2 p) {
  // How to implement this?
}

/// Get the position in which a block is rendered in, in the isometric space.
///
/// This does not include the (x,y) PositionComponent offset!
/// This assumes the tile sprite as a rectangular tile.
/// This is the opposite of [getBlockRenderedAt].
Vector2 getBlockRenderPositionInts(int i, int j) {
  // My implementation, I think this works as intended...
  return Vector2((i - j) * surfaceSize.x * 0.75, (i + j) * surfaceSize.y / 2);
}

But I don't know how the first method would look for a hexagonal isometric space. Perhaps this article could be helpful, but I'm having problems figuring out the proper maths.