findDOMNode warning when using loadingBox

[jamesderrick]

I've just started using the govuk react components and am currently looking at implementing a LoadingBox. If I try and use state to toggle the loading I get a warning. It works fine, but I would like to find a way to avoid the warning.

Steps to reproduce the behavior:

1. Create a component with a LoadingBox

<LoadingBox loading={loading}>
          <H1>Input Form</H1>
          <InputField
              onChange={(e) => setInputData(e.target.value)}
              hint={<>Enter your post below</>}
              mb={4}
              meta={{
                error: error,
                touched:true
              }}
          >
              Add A Post
          </InputField>
          <Button 
              onClick={handlePostData}
              mb={9}
          >
              SUBMIT
          </Button>
</LoadingBox>

2. useState to control the loading

const [loading, setLoading] = useState(false);

3. In the handlePostData function setLoading(true)
4. At the end of the handlePostData setLoading(false)

Expected behavior
Was not expecting an error and haven't been able to figure out a way of silencing it, other than removing StrictMode which I don't want to do.

Screenshots

• OS: Windows 10
• Browser: All (tested on latest Edge and Chrome)

[penx]

This seems to be coming from our use of react-transition-group@^4.2.1

https://github.com/reactjs/react-transition-group

This seems to be a known issue, we could try upgrading the library and there's a thread here that perhaps contains a fix we could use:

reactjs/react-transition-group#668