New Layout not being attached to Advanced nova MediaLibrary

[HassanElshazlyEida]

I'm using Custom Layout, and it works when the questions are already saved in the exercise. It saves the questions with the collection name exercises_5-Question. which 5 is ID

However, when I add a new question, it saves the images with the collection name exercises_${key} because the question isn’t saved yet. After refreshing the page, I find that the images are not attached to that question.

Is there a solution for this case?

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Exercise extends Model implements Auditable, HasMedia
{
    use InteractsWithMedia;

    public function registerMediaCollections(): void
      {
          $this
              ->addMediaCollection('exercises')
              ->useDisk('public');
      }
}

<?php

namespace App\Nova;
...
class Exercise extends Resource
{


    /**
     * The model the resource corresponds to.
     *
     * @var class-string<\App\Models\Exercise>
     */
    public static string $model = \App\Models\Exercise::class;


    /**
     * Get the fields displayed by the resource.
     *
     * @param NovaRequest $request
     * @return array
     * @throws Exception
     */
    public function fields(NovaRequest $request): array
    {
        
          return [
                Flexible::make('Questions')
                    ->confirmRemove()
                    ->onlyOnForms()
                    ->hideWhenCreating()
                    ->button('Add Question') 
                    ->resolver(new QuestionsResolver())
                    ->collapsed(true)
                    ->addLayout(QuestionsLayout::class)
                    ->fullWidth()
                    ->withMeta(['data-expanded' => false])
                    ->paginate()
                    ->setPaginationCount(10)
                    ->readonly(true)

            ])

        ]);

        return $fields;
    }

}

<?php

namespace App\Nova\Flexible\Layouts;
..

class QuestionsLayout extends Layout implements HasMedia
{
    use HasMediaLibrary;

    /**
     * The layout's unique identifier
     *
     * @var string
     */
    protected $name = 'Question';

    /**
     * The displayed title
     *
     * @var string
     */
    protected $title = 'Questions';

    /**
     * Define the layout's custom CSS classes
     *
     * @return string
     */
    public function classes(): string
    {
        return 'questions-layout';
    }

 
    public function registerMediaCollections(): void
    {
        $this
            ->addMediaCollection('exercises')
            ->useDisk('public');
    }

    /**
     * Get the fields displayed by the layout.
     *
     * @return array
     */
    public function fields()
    {
        return [
           
            Text::make('Question Text', 'question_text'),
    
            Images::make('Images', 'exercises')
            ->rules('max:4')
            ->singleMediaRules('max:2048','image'),
        ];
    }
    
}