Error with Base chain

[liotims]

There is an error using this example with Base chain:

ERROR in src/V4RouterExample.tsx:39:7
TS2322: Type '() => { account: undefined; batch?: { multicall?: boolean | { batchSize?: number | undefined; wait?: number | undefined; } | undefined; } | undefined; cacheTime: number; chain: Assign<{ readonly id: 8453; ... 5 more ...; readonly contracts: { ...; }; }, ChainConfig<...>>; ... 53 more ...; extend: <const client exten...' is not assignable to type 'OnChainProvider'.
  Call signature return types '{ account: undefined; batch?: { multicall?: boolean | { batchSize?: number | undefined; wait?: number | undefined; } | undefined; } | undefined; cacheTime: number; chain: Assign<{ readonly id: 8453; ... 5 more ...; readonly contracts: { ...; }; }, ChainConfig<...>>; ... 53 more ...; extend: <const client extends { ....' and '{ account: undefined; batch?: { multicall?: boolean | { batchSize?: number | undefined; wait?: number | undefined; } | undefined; } | undefined; cacheTime: number; chain: Chain | undefined; ... 53 more ...; extend: <const client extends { ...; } & Partial<...>>(fn: (client: Client<...>) => client) => Client<...>; } ...' are incompatible.
    The types returned by 'getBlock(...)' are incompatible between these types.
      Type 'Promise<GetBlockReturnType<Assign<{ readonly id: 8453; readonly network: "base"; readonly name: "Base"; readonly nativeCurrency: { readonly name: "Ether"; readonly symbol: "ETH"; readonly decimals: 18; }; readonly rpcUrls: { ...; }; readonly blockExplorers: { ...; }; readonly contracts: { ...; }; }, ChainConfig<...>...' is not assignable to type 'Promise<GetBlockReturnType<Chain | undefined, any, any>>'.
        Type 'GetBlockReturnType<Assign<{ readonly id: 8453; readonly network: "base"; readonly name: "Base"; readonly nativeCurrency: { readonly name: "Ether"; readonly symbol: "ETH"; readonly decimals: 18; }; readonly rpcUrls: { readonly alchemy: { ...; }; readonly infura: { ...; }; readonly default: { ...; }; readonly public: ...' is not assignable to type 'GetBlockReturnType<Chain | undefined, any, any>'.
          Type 'GetBlockReturnType<Assign<{ readonly id: 8453; readonly network: "base"; readonly name: "Base"; readonly nativeCurrency: { readonly name: "Ether"; readonly symbol: "ETH"; readonly decimals: 18; }; readonly rpcUrls: { readonly alchemy: { ...; }; readonly infura: { ...; }; readonly default: { ...; }; readonly public: ...' is not assignable to type '{ transactions: `0x${string}`[] | ({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 9 more ...; transactionIndex: number | null; } | { ...; } | {...'.
            Types of property 'transactions' are incompatible.
              Type '`0x${string}`[] | ({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 12 more ...; transactionIndex: number | null; } | ... 6 more ... | { ...; })[]' is not assignable to type '`0x${string}`[] | ({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 9 more ...; transactionIndex: number | null; } | { ...; } | { ...; })[]'.
                Type '({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 12 more ...; transactionIndex: number | null; } | ... 6 more ... | { ...; })[]' is not assignable to type '`0x${string}`[] | ({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 9 more ...; transactionIndex: number | null; } | { ...; } | { ...; })[]'.
                  Type '({ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 12 more ...; transactionIndex: number | null; } | ... 6 more ... | { ...; })[]' is not assignable to type '`0x${string}`[]'.
                    Type '{ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 12 more ...; transactionIndex: number | null; } | ... 6 more ... | { ...; }' is not assignable to type '`0x${string}`'.
                      Type '{ from: `0x${string}`; gas: bigint; nonce: number; to: `0x${string}` | null; value: bigint; r: `0x${string}`; s: `0x${string}`; v: bigint; gasPrice: bigint; maxFeePerGas?: undefined; maxPriorityFeePerGas?: undefined; ... 12 more ...; transactionIndex: number | null; }' is not assignable to type '`0x${string}`'.
    37 |   const getBestRoute = useCallback(async () => {
    38 |     const v3Pools = await V4Router.getV3CandidatePools({
  > 39 |       clientProvider: () => client,
       |       ^^^^^^^^^^^^^^
    40 |       currencyA: swapFrom,
    41 |       currencyB: swapTo,
    42 |     })

Here is the code :

import { Native, ChainId, CurrencyAmount, TradeType } from '@pancakeswap/sdk'
import { V4Router } from '@pancakeswap/smart-router'
import { baseTokens, bscTokens } from '@pancakeswap/tokens'
import { useCallback, useMemo, useState } from 'react'
import { createPublicClient, http } from 'viem'
import { bsc, base } from 'viem/chains'

import './App.css'

const chainId = ChainId.BASE
const swapFrom = Native.onChain(chainId)
const swapTo = baseTokens.usdc

/*const clientBSC = createPublicClient({
  chain: bsc,
  transport: http('https://bsc-dataseed1.binance.org'),
  batch: {
    multicall: {
      batchSize: 1024 * 200,
    },
  },
})*/

const client = createPublicClient({
  chain: base,
  transport: http('https://mainnet.base.org'),
  batch: {
    multicall: {
      batchSize: 1024 * 200,
    },
  },
})

export function V4RouterExample() {
  const [trade, setTrade] = useState<Awaited<ReturnType<typeof V4Router.getBestTrade>> | undefined>(undefined)
  const amount = useMemo(() => CurrencyAmount.fromRawAmount(swapFrom, 10 ** 16), [])
  const getBestRoute = useCallback(async () => {
    const v3Pools = await V4Router.getV3CandidatePools({
      clientProvider: () => client,
      currencyA: swapFrom,
      currencyB: swapTo,
    })

    const pools = [...v3Pools]
    const trade = await V4Router.getBestTrade(amount, swapTo, TradeType.EXACT_INPUT, {
      gasPriceWei: () => client.getGasPrice(),
      candidatePools: pools,
    })
    setTrade(trade)
  }, [amount])

  return (
    <div className="App">
      <header className="App-header">
        <p>Pancakeswap V4 Router Example.</p>
        <p>
          Get best quote swapping from {amount.toExact()} {amount.currency.symbol} to{' '}
          {trade?.outputAmount.toExact() || '?'} {swapTo.symbol}
        </p>
        <p>
          <button onClick={getBestRoute}>{trade ? 'Update quote' : 'Get Quote'}</button>
        </p>
      </header>
    </div>
  )
}

How to get it work with Base chain ?