Argument '1' passed to render() is expected to be of type Yajra\\DataTables\\Services\\view-string|null, string given

Question

I am using Laravel 10 as a backend for my project, but I always get this error:

Argument '1' passed to render() is expected to be of type Yajra\DataTables\Services\view-string|null, string given

I tried to understand the error, but I have been not successful resolving the problem.
Below is my code.

In my SideNavController.php:

class SideNavController extends Controller
{
        // User Dashboard Page
        public function users(UserDataTable $datatable)
        {
            if (Auth::check()) {
              return $datatable->render('dashboard/users');
            }
            return redirect("login");
        }
}

In my user.blade.php:

@extends ('layouts.layout')

@section('content')

<!--- For User Registration --->
<div class="card d-flex justify-content center mt-3">
 <div class="card-body">
  <div class="pb-2 mb-4 border-bottom border-dark">
   <h1 class="user-caption">User Registration</h1>
  </div>
   <form class="row g-3" id="user-registration-form" action="{{ url('dashboard/users/user-create') }}" method="post">
   @csrf

    <!--- For the Firstname textfield --->
    <div class="col-md-2 firstname-textfield mb-3">
     <label for="firstname" class="form-label">Firstname</label>
     <input type="text" class="form-control" name="firstname" id="firstname" required autofocus />
    </div><!---Closing of firstname-textfield mb-3 --->

    <!--- For the Middlename textfield --->
    <div class="col-md-2 middlename-textfield mb-3">
     <label for="middlename" class="form-label">Middlename</label>
     <input type="text" class="form-control" name="middlename" id="middlename" required autofocus />
    </div><!---Closing of middlename-textfield mb-3 --->

    <!--- For the Lastname textfield --->
    <div class="col-md-2 lastname-textfield mb-3">
     <label for="lastname" class="form-label">Lastname</label>
     <input type="text" class="form-control" name="lastname" id="lastname" required autofocus />
    </div><!---Closing of lastname-textfield mb-3 --->

    <!--- For the user age --->
    <div class="col-md-2 user-age mb-3">
     <label for="age" class="form-label">Age</label>
      <select id="age" class="form-select" name="age" required autofocus>
       <option selected>Choose...</option>
       <option>15</option>
       <option>16</option>
       <option>17</option>
       <option>18</option>
       <option>19</option>
       <option>20</option>
       <option>21</option>
       <option>22</option>
       <option>23</option>
       <option>24</option>
       <option>25</option>
       <option>26</option>
       <option>27</option>
       <option>28</option>
       <option>29</option>
       <option>30</option>
       <option>31</option>
       <option>32</option>
       <option>33</option>
       <option>34</option>
       <option>35</option>
       <option>36</option>
       <option>37</option>
       <option>38</option>
       <option>39</option>
       <option>40</option>
       <option>41</option>
       <option>42</option>
       <option>43</option>
       <option>44</option>
       <option>45</option>
       <option>46</option>
       <option>47</option>
       <option>48</option>
       <option>49</option>
       <option>50</option>
       <option>40</option>
       <option>41</option>
       <option>42</option>
       <option>43</option>
       <option>44</option>
       <option>45</option>
       <option>46</option>
       <option>47</option>
       <option>48</option>
       <option>49</option>
       <option>50</option>
       <option>51</option>
       <option>52</option>
       <option>53</option>
       <option>54</option>
       <option>55</option>
       <option>56</option>
       <option>57</option>
       <option>58</option>
       <option>59</option>
       <option>60</option>
      </select>
    </div><!--- Closing of col-md-1 user-age mb-3 --->

    <!--- For the user gender --->
    <div class="col-md-2 user-gender mb-3">
     <label for="gender" class="form-label">Gender</label>
      <select id="gender" class="form-select" name="gender" required autofocus>
       <option selected>Choose...</option>
       <option>Male</option>
       <option>Female</option>
       <option>Transgender</option>
       <option>Gender Neutral</option>
       <option>Non-binary</option>
       <option>Agender</option>
       <option>Pangender</option>
       <option>Genderqueer</option>
       <option>Two-spirit</option>
       <option>Third Gender</option>
       <option>Cisgender</option>
      </select>
    </div><!--- Closing of col-md-2 user-gender mb-3 --->

    <!--- For the user birthdate --->
    <div class="col-md-2 user-birthdate mb-3">
     <label for="birthdate" class="form-label">Birthdate</label>
     <input type="date" class="form-control" name="birthdate" id="birthdate" required autofocus />
    </div><!--- Closing of col-md-2 user-birthdate mb-3 -->

    <!--- For the user role --->
    <div class="col-md-2 user-role mb-3">
     <label for="role" class="form-label">User Role</label>
      <select id="role" class="form-select" name="role" required autofocus>
       <option>Choose...</option>
       <option>Super Admin</option>
       <option>Admin</option>
       <option>Manager</option>
       <option>User</option>
      </select>
    </div><!--- Closing of col-md-2 user-gender mb-3 --->

    <!--- For the user email --->
    <div class="col-md-4 user-email mb-3">
     <label for="email" class="form-label ">Email</label>
     <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required autofocus />
    </div><!--- Closing of col-md-4 user-email2 --->

    <!--- For the username --->
    <div class="col-md-2 user-username mb-3">
     <label for="username" class="form-label">Username</label>
     <input type="text" class="form-control" id="username" name="username" placeholder="Create New Username" required autofocus />
    </div><!--- Closing of col-md-4 user-email2 --->

    <!--- For the user password --->
    <div class="col-md-2 user-password mb-3">
     <label for="password" class="form-label">Password</label>
     <input type="password" class="form-control" id="password" name="password" placeholder="Create New Password" required autofocus />
    </div><!--- Closing of col-md-4 user-password2 mb-3 --->

    <!--- For the user retype-password --->
    <div class="col-md-2 user-retype-password mb-3">
     <label for="confirm-password" class="form-label">Re-type Password</label>
     <input type="password" class="form-control" id="confirm-password" name="confirm-password" placeholder="Re-type your Password" required autofocus />
     <small id="password-message" class="form-text text-muted"></small>
    </div><!--- Closing of col-md-4 user-retype-password mb-3 --->

    
    <div class="row g-2">

     <!--- Submit Buttons --->
     <div class="col-md-5 submit-button-container mb-3">
      <button type="submit" id="submit-button" name="submit" class="btn btn-primary col-md-3">Create</button>
      <button type="reset" name="reset" class="btn btn-primary col-md-3">Reset</button>
     </div><!--- Closing of submit-button-container mb-3 --->
    </div><!--- Closing of row g-3 --->
   </form>
 </div><!--- Closing of card-body --->
</div><!---  Closing of card d-flex justify-content center mt-3 --->

<div class="card">
 <div class="card-body">
    {!! $dataTable->table(['class' => 'table table-bordered'],true) !!}
</div>
</div>

@endsection

<!--- For the javascripts --->
<script>

//For Submit Function Disable button when textfields have no value
document.addEventListener("DOMContentLoaded", function() {
    const textFields = document.querySelectorAll("#user-registration-form input[required]");
    const submitButton = document.querySelector("#submit-button");

    function enableSubmitButton() {
        submitButton.removeAttribute("disabled");
    }

    function disableSubmitButton() {
        submitButton.setAttribute("disabled", "disabled");
    }

    textFields.forEach(function(textField) {
        textField.addEventListener("input", function() {
            if (textField.value.trim().length > 0) {
                enableSubmitButton();
            } else {
                disableSubmitButton();
            }

            // If all text fields have a value, enable the submit button
            const allTextFieldsFilled = Array.from(textFields).every(function(textField) {
                return textField.value.trim().length > 0;
            });

            if (allTextFieldsFilled) {
                enableSubmitButton();
            } else {
                disableSubmitButton();
            }
        });
    });

    // Initialize the submit button as disabled
    disableSubmitButton();
});

//For User Password Confirmation
document.getElementById('user-registration-form').addEventListener('submit', function(event) {
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm-password');
    const passwordMessage = document.getElementById('password-message');

    if (password.value !== confirmPassword.value) {
        event.preventDefault();
        passwordMessage.textContent = 'The password and password confirmation do not match.';
        passwordMessage.style.color = 'red';
    } else {
        passwordMessage.textContent = '';
    }
});
</script>

Can some help me fix this?

I tried using chatgpt but no luck. I tried looking and editing my code, still no luck.