using refs safely (StrictMode)

0
votes

On my site (written in React) I use a calendar so that the user can select a date and time range. For this I use the react-advanced-datetimerange-picker library.

Also in index.js file I use <React.StrictMode>. Because of this, when working with the library, I have some warnings. I would like to get rid of them.

I know the easiest way to remove <React.StrictMode>. But this is not entirely true. Below is a part of my code

    return (
    <ArrowDropdown>
      <DateTimeRangeContainer
        ranges={ranges}
        autoApply={true}
        start={time.start}
        end={time.end}
        local={local}
        applyCallback={handleDateRangeChange}
        forceMobileMode
        years={[2022, 2025]}
        style={styleRange}
      >
        <FormControl
          readOnly 
          id="formControlsTextB"
          style={{ cursor: "pointer" }}
          value={value}
        />
      </DateTimeRangeContainer>
    </ArrowDropdown>
  );

The whole problem lies in the DateTimeRangeContainer component. If I remove it, the warnings disappear. So here are the warnings I have:

react-dom.development.js:86 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: FormControl. Learn more about this warning here: https://reactjs.org/link/legacy-context

and second..

react-dom.development.js:86 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DateTimeRangeContainer which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

I take it these warnings are related? Help me fix them

javascriptreactjsdatetimewarningsstrict-mode