NextJS client component inside page

I am using NextJS 14.
I am building a landing page and for one of the sections I need to use useState.
I marked my component as “use-client” but it still bringing an error that “You’re importing a component that needs useState. It only works in a Client Component but none of its parents are marked with “use client”, so they’re Server Components by default.”

Example of the page:

import { Metadata } from 'next';
import React from 'react';
import Footer from "@/app/components/layout/footer/footer";

export const metadata: Metadata = {
  title: 'NextApp',
  description: 'Generated by create next app',
};

const HomePage = () => (
  <Footer />
);

export default HomePage;

my component:

"use-client";

import { useEffect, useState } from "react";

import classes from './style.module.scss';

const Footer = () => {
  const [value, setValue] = useState();
  return (
    <div>
      <footer className={classes.footer}>test</footer>
    </div>
  );
};

export default Footer;

‘use-client’ is wrong. Use space instead of dash between the ‘use’ and ‘client’.

Like this:

'use client'  // Add 'use client' at the top of the component file.
import { useEffect, useState } from "react";

import classes from './style.module.scss';

const Footer = () => {
  const [value, setValue] = useState();
  return (
    <div>
      <footer className={classes.footer}>test</footer>
    </div>
  );
};

export default Footer;