React + Stripe error: clientSecret should be a client secret of the form ${id}_secret_${secret}

Good evening! :)

Some error driving me insane. Checked the base, nothing like my stuff.

The clientSecret sent from my backend and the one I'm eventually passing to Elements match, but then I'm getting:

Invalid value for elements(): clientSecret should be a client secret of the form ${id}_secret_${secret}. You specified: cs_test_firstStringOfChars_secret_secondStringOfChars

The session ID does match the cs_test_firstStringOfChars part, meaning my secret is exactly of the required form! Anyone has any idea what could be going on?

Front End

function Payment () {

  const [clientSecret, setClientSecret] = useState('');
  const stripePromise = loadStripe('pk_test_51QxRTwCGr4KIB7NcBkCAmeZQSwZX5sNq0V0O4OaOdnzxnJ3xAyWRT9hOE0nKN73f6lsrQfpSM0cuIu6wTrNNbBr500rorDyi3Z');
  const { name, image, price } = useLocation().state.from;

  useEffect( () => {
      requestCheckout({name, price}).then( secret => {
        setClientSecret(secret);
      }) }, []);

  return (
    <div id="payment">
      <RoomZoom/>
      { stripePromise && clientSecret && (
      <Elements stripe={stripePromise} options={{clientSecret}}>
        <Checkout name={name} price={price}/>
      </Elements>
      )}
    </div>
  )
}

export default Payment

Back End

async function checkOut (req, res) {
  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'payment',
      ui_mode: 'embedded',
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'isk',
            product_data: {
              name: req.body.name,
            },
            unit_amount: req.body.price,
          },
          quantity: 1
        },
      ],
      return_url: 'http://localhost:5173'
    });
    res.status(201).json({clientSecret: session.client_secret});
  }
  catch (err) {
    console.log(err);
  }
}

You should be using the EmbeddedCheckoutProvider, not the Elements provider.

I recommend referring to the embedded Checkout quickstart guide here : https://docs.stripe.com/checkout/embedded/quickstart?client=react