Adding component in NextJs fails the Hydration

Question

I have this component called Tip, in components/tip.js:

export default function Tip({ children }) {
  return (
    <div className="bg-mainblue bg-opacity-50 max-w-4xl border-border border-l-8 rounded p-3">
      <h1 className=" text-link font-bold py-2">TIP</h1>
      <p>{children}</p>
    </div>
  );
}

and I add this Component in pages/installations.js like this:

<Tip>Hello</Tip>

When refreshing the page, it shows this.

And the DevTools console shows 8 errors:

1. Warning: Expected server HTML to contain a matching <div> in <p>
2. Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
3. Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
4. Warning: validateDOMNesting(...): <h1> cannot appear as a descendant of <p>.
5. Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
6. Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
7. Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
8. Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.