Laravel Inertia React TypeError: this.resolveComponent is not a function

I have a laravel ap and I am trying to fetch some data from an external api and display this data with React.

There is a search field with a submit button and under this form a list of the results. When I press the search button the data gets fetched successfully from the external api but in my front end I can’t display the results my component stays empty. I think I’ve setup the routes wrong maybe? I think the issue is it tries to redirect to ‘/’ and that empties the results everytime ? Something is not correct there I think.

In my console I get this error after submitting:

Uncaught (in promise) TypeError: this.resolveComponent is not a function

My Kernel.php

class Kernel extends HttpKernel
{
    /**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
            AppHttpMiddlewareHandleInertiaRequests::class,
        ],
    ];
}

Routes in web.php

Route::controller(LegoController::class)->group(function ()  {
    Route::get('/','index')->name('lego.index');
    Route::get('/searchParts','searchParts')->name('lego.searchParts');
});

LegoController.php

class LegoController extends Controller
{
    public function __construct(private LegoProvider $legoProvider)
    {
    }

    public function index()
    {
        return Inertia::render('Index');
    }

    public function searchParts(Request $request): Response
    {
        if (!$request->setNumber) {
            return Inertia::render('PartsList', ['parts' => Collection::make()]);
        }

        return Inertia::render('PartsList', ['parts' => $this->legoProvider->getPartsBySet($request->setNumber)]);
    }
}

Index.jsx

import React, { useState } from 'react';
import { router } from '@inertiajs/react'
import PartsList from "./PartsList.jsx";

const Index = () => {
    const [values, setValues] = useState({
        setNumber: "",
    });

    function handleChange(e) {
        const key = e.target.id;
        const value = e.target.value
        setValues(values => ({
            ...values,
            [key]: value,
        }))
    }

    function handleSubmit(e) {
        e.preventDefault()
        router.get('/searchParts', values)
    }

    return (
        <>
            <h1>Search parts by set number</h1>
            <hr/>
            <form onSubmit={handleSubmit}>
                <label htmlFor="setNumber">Set Number:</label>
                <input id="setNumber" value={values.setNumber} onChange={handleChange} />
                <button type="submit">Search</button>
            </form>

            <PartsList />
        </>
    )
}

export default Index

PartsList.jsx

import React, { useState } from 'react';

const PartsList = ({ parts }) => {
    return (
        <>
            <h1>Parts</h1>
            <hr/>
            { parts && parts.map( (part) => (
                <div key={part.id}>
                    <h2>{part.partName}</h2>
                    <a href={part.partUrl}>{part.partNumber}</a>
                </div>
            )) }
        </>
    )
}

export default PartsList