Problema de relacionamento um para muitos

Sou novo no Laravel. Estou tentando usar o relacionamento HasTo. Tenho duas tabelas no banco de dados. Uma é a de produtos e a outra é a de categorias. Uso um formulário para adicionar um produto. No formulário, há uma parte de opção de seleção. Nessa parte, seleciono uma categoria para os produtos na tabela de categorias. O problema é que, quando seleciono uma categoria, quero obter o ID dessa categoria e adicioná-lo à coluna "categoryId" na tabela de produtos. Então, quando publico os produtos, quero acessar a parte "categoryId" na tabela de produtos e obter a categoria correspondente na tabela de categorias, mas não consegui. Aqui está meu formulário:

<form action="{{ route('product.store') }}" method="post" enctype="multipart/form-data">
  @csrf
    <div class="form-group mb-3">
      <label>Name</label>
      <input
        name="productName"
        type="text"
        class="form-control" />
    </div>
    <div class="form-group mb-3">
      <label>Description</label>
      <textarea name="productDescription" class="form-control" rows="3"></textarea>
    </div>
    <div class="form-group mb-3">
      <label>Price</label>
      <input name="productPrice" type="number" class="form-control" />
    </div>
    <div class="form-group mb-3">
      <label>Category</label>
      <input name="categoryId" type="number" class="form-control" />
      <select class="custom-select tm-select-accounts form-control" name="categoryId">
        <option>Choose a Category</option>
        @foreach($getCategory as $category)
          <option value="{{ $category->id }}">{{ $category->categoryName}}</option>
        @endforeach 
      </select>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary btn-block text-uppercase">Add Product</button>
  </div>
</form>

Aqui está minha tabela quando publico os produtos: as três primeiras tags td estão funcionando. Não consegui obter o categoryName que corresponde ao categoryId, então publiquei o Id.

<tbody>
  @foreach ($product as $item)
    <tr>
      <th scope="row">
        <input type="checkbox" />
      </th>
      <td class="tm-product-name">{{ $item->productName }}</td>
      <td>{{ $item->productPrice }}</td>
      <td>{{ $item->productDescription }}</td>
      <td>{{ $item->categoryId }}</td>
      <td>
        <a href="{{ route('product.edit', $item->id) }}">
          <i class="fas fa-3x fa-edit"></i>
        </a>
      </td>
      <td class="text-right">
        <form method="post" action="{{ route('product.destroy', $item->id) }}">
          @method('delete')
          @csrf
          <button type="submit" class="btn btn-danger btn-sm show_confirm" id="deletebutton">Delete Product</button>
        </form>
      </td>
    </tr>
  @endforeach
</tbody>

Controlador de Produto:

public function index()
{
    $product = Page::all();

    return view('admin.pages.products', compact('product'));
}

/**
 * Show the form for creating a new resource.
 */
public function create()
{
    $data['getCategory'] = Category::get();

    return view('admin.pages.add_product', $data);
}

/**
 * Store a newly created resource in storage.
 */
public function store(Request $request)
{
    $request->validate([
        'productName' => ['required','string','max:255'],
        'productDescription' => ['required','string'],
        'productPrice' => ['nullable','numeric'],
        'categoryId' => ['required'],
    ]);

    $product = new Page();
    $product->productName = $request->productName;
    $product->productDescription = $request->productDescription;
    $product->productPrice = $request->productPrice;
    $product->categoryId = $request->categoryId;
    $product->save();

    return redirect()->route('admin')->with('success', 'Ürün başarıyla eklendi');
}

Modelo de página:

class Page extends Model
{
    protected $table = 'products';
    
    protected $fillable = [
        'productName', 
        'productDescription', 
        'productPrice',
        'productImage',
        'categoryId'
    ];

    
    public function products()
    {
        return $this->belongsTo(Category::class);
    }
}

CategoriaModelo:

class Category extends Model
{
    protected $table = 'category';
    
    protected $fillable = [
        'categoryName',
    ];

    public function productCategories()
    {
        return $this->hasMany(Page::class);
    }
}

Consegui vincular duas tabelas no banco de dados, mas não consigo obter o categoryName na tabela categories usando o ID da categoria na tabela products.