I have a laravel app with React and I am trying to fetch some data from an external api

I have 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?

In my console I get this error after submitting:

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

I think the issue is it tries to redirect to ‘/’ and that empties the results everytime ? Something is not correct there I think

My routes:

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

My LegoController:

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

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

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

I don’t have to show the code in my legoProvider since that works good.

Parts.jsx

import React, { useState } from 'react';
import { router } from '@inertiajs/react'

const searchParts = ({ parts }) => {
    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('/', 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>

            <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 searchParts