[Bug] `Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.`

[mathieucaroff]

When we want to use useSteps in a component inside a <p> element, we get the following console error:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

See it in this codesandbox's console: https://codesandbox.io/s/infallible-hertz-2yjsj3?file=/src/index.js

Current behavior: The placeholder element produced by useStep is a <div>, which cannot always be inserted in the DOM without triggering the validateDOMNesting error in the console.

Expected behavior: useSteps should not return a <div /> placeholder element since this triggers the aforementioned error. Instead, it could return a <span /> element, which would address this issue.

[mathieucaroff]

Note: it is possible to ignore console errors programmatically by inserting a piece of code similar to the one below somewhere in your project:

console.error = (function (consoleDotError) {
  return function (...args) {
    if (args[0] && args[0].includes("Warning: validateDOMNesting")) return
    consoleDotError.call(console, ...args)
  }
})(console.error)