callback in Props can not get current data

[sinbargit]

Below is my code

    const x = Math.random()
  console.log('--0--', x)
  const toolItems = useMemo(
    () =>
      [
        { key: 'Header' },
        { key: 'Paragraph' },
        { key: 'Dropdown' },
        { key: 'Checkboxes' },
        { key: 'RadioButtons' },
        { key: 'TextInput' },
        { key: 'EmailInput' },
        { key: 'PhoneNumber' },
        { key: 'NumberInput' },
        { key: 'Image' },
        {
          key: 'MyCarousel',
          element: 'CustomElement',
          component: MyCarousel,
          type: 'custom',
          bare: true,
          forwardRef: true,
          field_name: 'my_carousel_',
          name: 'My Carousel',
          icon: 'fa fa-cog',
          props: {
            matiralMap,
            form: () => {
              console.log('--1--', x)
              console.log('-----return  ', extraData, new Date())
              return extraData
            },
          },
          label: 'Carousel',
        },
      ] as any,
    [extraData]
  )

When I call form() in MyCarousel components. The console prints the old "x" value. This value is the value when MyCarousel was just initialized, but this value has been updated, but the latest one has not been printed. Why? Aren't they in the same scope?
please see below screenshot, it looks so strange.
Is there anyway I can get the lastest value of x?