Hey, this is my first nextjs project, and I have this case where I'm creating a re-usable component to show a council details on my page.

Here are the props and their type on the re-usable component:

function Section1({
  title,
  topic_title,
  council_detail,
  council_description,
  topic_description,
  icon,
}: {
  title: string;
  topic_title: string;
  council_detail: string;
  council_description: React.ReactNode;
  topic_description: React.ReactNode;
  icon: string;
}) {
  return ...

Here is where the component is being called on the main page.tsx:

<div>
  {councils.map(
    (
      {
        title,
        topic_title,
        council_detail,
        council_description,
        topic_description,
        icon,
      },
      index
    ) => (
      <Section1
        title={title}
        topic_title={topic_title}
        council_detail={council_detail}
        council_description={council_description}
        topic_description={topic_description}
        icon={icon}
        key={index}
      />
    )
  )}
</div>

I got the props from constants.jsx where on the "council_description" and "topic_description" I use a <p> tag so it could be more customizable.

Its actually working fine, but there is an error on the localhost webpage where it says there is a hydration error on it:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <p> in <p>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
p
p
div
div
div
div
Section1
div
div
CouncilsPage

Is there a way to troubleshoot this, since I'm a bit concerned about it. Or is it okay to just ignore this error?

Apology if there is any mistake on this post, since it my first time being here. Any help would be appreciated!