laravel 機能追加エラーに関して

実現したいこと

現在laravelを使用して料理レシピ投稿サイトを制作しています。詳細ページに料理レシピ投稿機能を追加し、レシピをデータベースに送って、同じページに反映させる作業を行っています。しかしながら投稿用の
コードを書いているのですが下記のエラーが出てしまい先に進めない状況です。自分なりにエラーの
内容をしらべ、POSTメソッドに訂正したり、controllerの記述を見直したのですが解決できませんでした
もしlaravelに詳しい方がいたら教えていただけたら幸いです。

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

The GET method is not supported for route recipes/1/steps. Supported methods: POST.

該当のソースコード

(web.route)
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CategoryController;
use App\Http\Controllers\ProductController;
use App\Http\Controllers\TopController;
use Illuminate\Support\Facades\App;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Auth::routes();

Route::resource('category', CategoryController::class);
Route::resource('product', productController::class);
Route::get('/', [ProductController::class, 'productTop']);
Route::get('product/{id}',[ProductController::class, 'show']);

Route::get('top',[TopController::class, 'index']);
Route::get('top{id}',[TopController::class, 'show'])->name('top.show');

Route::post('/recipes/{recipe}/steps', [RecipeStepController::class, 'store'])->name('recipe.steps.store');


Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

(recipestepcontroller)
<?php

namespace App\Http\Controllers;
use App\Models\Recipe;
use App\Models\RecipeStep;
use App\Models\Product;
use Illuminate\Http\Request;

class RecipeStepController extends Controller
{
    //
    public function store(Request $request,Recipe $recipe)
    {
        $request->validate([
            'step' => 'required|string|max:1000',
        ]);
         

        RecipeStep::create([
            'recipe_id' => $recipe->id,
            'step' => $request->input('step'),
        ]);

        $product_id = $recipe->product_id;
       return redirect()->route('top.show', $product_id)->with('success', '作り方を投稿しました');

    }
}
```ここに言語を入力
コー
``

(top.show.blade)
<body>
  <div class="product-container">
    <div class="product-details">
      <img src="{{ asset('images') }}/{{ $product->image }}" alt="Product Image">
      <h1>{{ $product->name }}</h1>
      <p>{{ $product->description }}</p>
      <p class="price">Price: {{ $product->price }} 円 + 税</p>

      <div class="recipe-form">
        <form action="{{ route('recipe.steps.store', ['recipe' => $product->id]) }}" method="post">
          @csrf
          <div class="form-group">
            <label for="step">作り方</label>
            <textarea class="form-control" name="step" id="step" placeholder="作り方を入力してください"></textarea>
          </div>
          <button type="submit">作り方を投稿</button>
        </form>
      </div>

      <!-- レシピのステップを表示　-->
      <div class="recipe-steps">
        <h2>作り方</h2>
       @if ($product->recipSteps)
       <ul>
        @foreach ($product->recipSteps as $step)
        <li>{{$step->step }}</li>
      @endforeach
       </ul>
       @else
       <p> recipe steps available</p>
       @endif
       </ul>

      </div>
    </div>
  </div>
</body>
</html>

``````ここに言語を入力
コード

コード
(topcontroller)
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\ProductController;
use App\Http\Controllers\CategoryController;
use App\Models\Category;
use App\Models\Product;

class TopController extends Controller
{
    //
    public function index(){
      $categories = Category::latest()->get();
      return view('top.index', ['categories' => $categories]);
    }

    

    public function show($id){
      $product = Product::with('recipeSteps')->findOrFail($id);
      return view('top.show',compact('product'));
    }

}