Test warns that I need to use `act` for user actions, then warns act is not configured if I do

app/components/forms/inputs/date-time/tests/date-time.spec.tsx から始め、await user.tab() 周辺の警告を再現してください。app/components/forms/inputs/date-time/date-time.tsx と app/components/forms/inputs/date/date.tsx を読み、日付ピッカーとフォームの更新を追跡してください。valid-input テストで、どちらの act 警告も発生させずに tab とバリデーションを実行できれば完了です。

From my understanding, user actions do not need to be wrapped in act yet I'm still getting an error that state updates are happening outside of react for a datepicker component. When the user.tab() code is called below, that triggers a react-datepicker component to close and form state to update with validation.

Yet if I try to wrap the code inside act like it recommends, it says

Warning: The current testing environment is not configured to support act. All of our other act calls work fine so I think it's because it's "nesting" them since user events are already wrapped in act.

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s Manager 
    at Manager (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/@blueprintjs_core.js?v=19bc5f46:16758:24)
    at Popover (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/@blueprintjs_core.js?v=19bc5f46:18798:5)
    at div
    at div
    at InputOverlay (http://localhost:63315/app/components/overlays/overlays.tsx:165:32)
    at SelectInput (http://localhost:63315/app/components/forms/inputs/selects/selects.tsx:285:3)
    at div
    at header
    at CalendarHeader (http://localhost:63315/app/components/forms/inputs/date/date.tsx:118:3)
    at div
    at div
    at div
    at CalendarContainer (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:7267:16)
    at Wrap (http://localhost:63315/app/components/forms/inputs/date/date.tsx:64:19)
    at div
    at ClickOutsideWrapper (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:7292:22)
    at Calendar2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:9862:26)
    at div
    at div
    at TabLoop2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10477:26)
    at Portal2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10440:26)
    at PopperComponent2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10532:40)
    at WithFloating (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10515:35)
    at DatePicker2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10590:26)
    at DateInput (http://localhost:63315/app/components/forms/inputs/date/date.tsx:222:3)
    at div
    at DateTimeInput (http://localhost:63315/app/components/forms/inputs/date-time/date-time.tsx:26:3)
    at form
    at FormProvider (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/chunk-OEVTHLDK.js?v=19bc5f46:114:11)
    at Form (http://localhost:63315/app/components/forms/forms.tsx:59:3)
    at DateTimeInputForm (http://localhost:63315/redacted/app/components/forms/inputs/date-time/tests/date-time.spec.tsx?import&browserv=1758221332900:19:3)

const DateTimeInputForm = ({ name, onSubmit, required, ...props }: DateTimeInputTestProps): React.JSX.Element => {
  const schema = z.object({
    [name]: zodDateTimeSchema({
      required
    })
  })

  const methods = useForm(schema)

  return (
    <Form methods={methods} onSubmit={onSubmit} schema={schema}>
      <DateTimeInput name={name} required={required} {...props} />
    </Form>
  )
}

describe('inputs - date-time', () => {
  it('does not error when valid', async () => {
    const user = userEvent.setup()

    render(<DateTimeInputForm includeSeconds label='Test' name='test' required />)

    const inputs = document.querySelectorAll('input')
    expect(inputs).toHaveLength(4)

    await user.click(inputs[0])
    await user.keyboard('2001-01-01')
    await user.tab() // < removing this line avoids the error (but we have further logic after this we want to test)

    expect(document.querySelector('input[class*="error"]')).toBeFalsy()
  })
})