Dependency loop when trying to use zendeskgarden/react-forms with the scaffold?

I'm trying to use @zendeskgarden/react-forms, but going round in circles with dependency issues and I finally upgraded to use zendeskgarden 9.5.3. The buttons where working ok, but as soon as I try to use forms, I'm get stuck in a dependency loops.

Can anyone help? I've posted details on stackoverflow about trying to use the react-forms [Stackoverflow](https://stackoverflow.com/questions/79559874/upgrading-to-zendeskgarden-9-5-3-broken-tests-and-build-error-react-merge-ref)

This is an example of a React Component I'm creating. This was working until I introduced react-forms.

import React, { useState } from 'react';
import styled from 'styled-components';

import { mediaQuery } from '@zendeskgarden/react-theming';
import { MD } from '@zendeskgarden/react-typography';
import { DatePicker } from '@zendeskgarden/react-datepickers'
import { Input, Field } from '@zendeskgarden/react-forms'
import { Grid } from '@zendeskgarden/react-grid'

import { CustomerOrderSearchResultItemWidget } from './CustomerOrderSearchResultItemWidget';

export const CustomerOrderSearchWidget = ({searchTerm, pinnedOrder, onChangeSearchTerm, onSubmitSearchTerm, onClickToPinOrderCallBack, onClickToShowHideOrderDetailsCallback}) => {
    
    const [Orders, setOrders] = useState([])
    const [FromDate, setFromDate] = useState(Date.UTC(2024, 11, 6))
    const [IsSearching, setIsSearching] = useState(false)
    
    const handleSetOrders = (orders) => {
        
        console.debug("CustomerOrderSearchWidget.handleSetOrders", orders)

        setOrders(orders)
        setIsSearching(false)
        
        console.log("IsSearching", IsSearching)
    }

    const handleChangeSearchTerm = (e) => {
        console.log("handleChangeSearchTerm.IsSearching", IsSearching)
        setIsSearching(false)
        onChangeSearchTerm(e)
    }

    const handleSubmitSearchTerm = (e) => {
        e.preventDefault(); // Prevents page reload
        console.log("handleSubmitSearchTerm", e)

        setIsSearching(true)
        onSubmitSearchTerm(searchTerm, handleSetOrders)
    }

    const handleClickToPinOrderCallBack = (order, onSetPinnedTickets) => {
        onClickToPinOrderCallBack(order, onSetPinnedTickets)
    }
    
    const handleClickToShowHideOrderDetailsCallback = (order) => {
        // setClicked(true);
        onClickToShowHideOrderDetailsCallback(order)
    }

    return (
        (onChangeSearchTerm === undefined || onSubmitSearchTerm === undefined || onClickToPinOrderCallBack === undefined || onClickToShowHideOrderDetailsCallback === undefined) ?
            <React.Fragment><p>Something went wrong!!!</p></React.Fragment>
        :

        <div className="container mt-4">
            <div className="input-group">
                <form onSubmit={handleSubmitSearchTerm} id="form-search">
                    <Grid.Row justifyContent="center">
                        <Grid.Col>
                            <MD>
                                <Field>
                                    <Input isCompact />
                                </Field>      
                            </MD>
                        </Grid.Col>
                    </Grid.Row>
                    <Grid.Row justifyContent="center">
                        <Grid.Col>
                            <MD>
                                <Field.Label htmlFor="input-search-term">Search:</Field.Label>
                                <Input id="input-search-term"
                                    placeholder="Enter search term"
                                    minLength="3" maxLength="70"
                                    required
                                    isCompact
                                    onChange={handleChangeSearchTerm} /> 
                                <input type="submit" id="btn-search-term" value="Search" />
                            </MD>
                        </Grid.Col>
                    </Grid.Row>
                </form>
            </div>
            <div id="results">
                {
                    // TODO: Use progress bar
                    (IsSearching === true && searchTerm !== undefined) ?
                        <React.Fragment>
                            <p>Searching...</p>  
                        </React.Fragment> : <React.Fragment></React.Fragment>
                }
                {
                    (pinnedOrder === undefined || pinnedOrder === "") &&
                        <React.Fragment>
                            <div className="row">
                                <div className="col-md-4" id="pinned-order-number">
                                    <label className="form-label">Click Attach to pin the order to this ticket</label>
                                </div>
                            </div>
                        </React.Fragment>
                }
                {
                    (Orders === undefined) ? 
                        <React.Fragment><p>0 result(s).</p></React.Fragment> 
                        :
                        (searchTerm && IsSearching === false) ?
                            <React.Fragment>
                                <p>{Orders.length} result(s) for {searchTerm}.</p> 
                            </React.Fragment>
                        : <React.Fragment></React.Fragment>
                }
                {
                    (Orders !== undefined && IsSearching === false) ?
                    
                        Orders.map((e,i) => (
                            <CustomerOrderSearchResultItemWidget 
                                key={e.pkOrderID} 
                                orderDetails={e} 
                                onClickToPinOrderCallBack={handleClickToPinOrderCallBack} 
                                onClickToShowHideOrderDetailsCallback={handleClickToShowHideOrderDetailsCallback}    
                            />
                        )) 
                    
                    : <React.Fragment><p>0 result(s).</p></React.Fragment>
                }
            </div>
        </div>
    )
}