Hexagonal grid and clickable hex cells

I am new to Unity. I’ve followed enough tutorials to be able to get around, learning the documentation, etc.
I am also new to a lot of the terminology used in game design/development. So bear with me … I might not use the right word or describe something quite correct.

What I am trying to figure out is how to have a hexagonal grid layer. I don’t need help with scripting the hexagons - vectors, location, etc. I suppose what that ‘layer’ is would depend on whether or not the grid is supposed to be drawn. I’m not really interested in drawing the grid, it is the center point of each hexagon and the inner radius that are important but I want to keep the hex vectors cached.

When the player hovers the mouse within the inner radius of a hexagon, I want to display the hexagon. Would that be a sprite?

Here is what my scene hierarchy looks like:

If I can get a little help on what object I need to add to the scene, a tip or two on configuration, etc. that would be much appreciated.

Update:
I added a UI Panel nested within the Canvas. I have a Sphere Prefab (named ‘HexCell’) nested under the Panel (named ‘HexGrid’) which represents the inner circle of the hexagon. As you can see from the image, my circles do not appear to be properly positioned at the lower left corner of the panel (the outline of the panel is visible):

What do I need to do to transform the position of the circles? I’ve attached my HexGrid script:

using UnityEngine;
using System.Collections;

public class HexGrid : MonoBehaviour
{
    private Vector2 offset = new Vector2 ();

    public Transform cell;
    public GameObject panel;

    public int width;
    public int height;
   
    public float radius = 0.5f;

    void Start ()
    {
        print ("panel: (" + panel.transform.localPosition.x + "," + panel.transform.localPosition.y + ")");

        float unitLength = radius / (Mathf.Sqrt (3) / 2);
        offset.x = unitLength * Mathf.Sqrt (3);
        offset.y = unitLength * 1.5f;

        for (int x = 0; x < width; x++) {
            for (int y = 0; y < height; y++) {
                var hexpos = positionOffset (x, y);
                var pos = new Vector3 (hexpos.x, hexpos.y, 0);
                Instantiate (cell, pos, Quaternion.identity);
            }
        }
    }

    Vector2 positionOffset (int x, int y)
    {
        Vector2 position = Vector2.zero;
      
        if (y % 2 == 0) {
            position.x = x * offset.x;
            position.y = y * offset.y;
        } else {
            position.x = (x + 0.5f) * offset.x; // - panel.transform.position.x;
            position.y = y * offset.y; // - panel.transform.position.y;
        }

        print ("cell: (" + position.x + "," + position.y + ")");
        return position;
    }
}

are you looking to do something like this?
ex:

(i’m not too familiar with unityUI)

maybe the Grid Layout might help you.
use negative value for spacing.
and for each alternating row (or column), the 1st child can han a margin offset that lines it up.

Yes. That would get me started. How did you make it? That is what I need help with.