Resolved: I would like to change only clicked header link text color with react

import React, { useState } from "react";
import { Link as ScrollLink } from "react-scroll";

const Header = (props) => {
  const { headerPage } = props;
  const [onClickChangeColor, setOnClickChangeColor] = useState(false);
  const redText = () => {
    setOnClickChangeColor(!onClickChangeColor);
  };

  return (
    <div class="mr-8 cursor-pointer">
      <ScrollLink
        className={onClickChangeColor ? "text-[#FF5757]" : ""}
        onClick={redText}
        to={headerPage}
        smooth={true}
        duration={500}
      >
        {headerPage}
      </ScrollLink>
    </div>
  );
};

export default Header;

import React from "react";
import Header from "./Header";

const HeaderLayout = () => {
  const headerPages = ["home", "about", "work", "skill", "contact"];

  return (
    <div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]">
      {headerPages.map((headerPage) => (
        <Header headerPage={headerPage}>{headerPage}</Header>
      ))}

      <div
        className="resume"
        class="w-24 h-8  text-[#FF5757] border border-[#FF5757] rounded-md"
      >
        <a
          href="https://drive.google.com/file/d/usp=sharing"
          class="block"
        >
          resume
        </a>
      </div>
    </div>
  );
};

const HeaderLayout = () => {
  const headerPages = ["home", "about", "work", "skill", "contact"];
  const [selectedHeader, changeSelectedHeader] = useState("");

  return (
    <div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]">
      {headerPages.map((headerPage) => (
        <Header
          headerPage={headerPage}
          changeSelectedHeader={changeSelectedHeader}
          selectedHeader={selectedHeader}
        >
          {headerPage}
        </Header>
      ))}

import React from "react";
import { Link as ScrollLink } from "react-scroll";

const Header = (props) => {
  const { headerPage, changeSelectedHeader, selectedHeader } = props;
  const redText = () => {
    changeSelectedHeader(headerPage);
  };
  return (
    <div class="mr-8 cursor-pointer">
      <ScrollLink
        className={headerPage === selectedHeader ? "text-[#FF5757]" : ""}
        onClick={redText}
        to={headerPage}
        smooth={true}
        duration={500}
      >
        {headerPage}
      </ScrollLink>
    </div>
  );
};

export default Header;