Reactjs – Unable to pass cypress test

Not able to figure out where I’m going wrong

import React, { useState } from 'react';

const ColorPickerComponent = () => {
  // State to hold the default background color
  const [defaultBGColor, setDefaultBGColor] = useState('#ffffff'); // Default to white

  // Function to handle the color change
  const handleBGColorChange = (e) => {
    console.log(e.target.value); // Log the new color value
    setDefaultBGColor(e.target.value); // Update the state with the new color
  };

  return (
    <div style={{ backgroundColor: defaultBGColor, padding: '20px' }}>
      <h1>Pick a Background Color</h1>
      <input
        type="color"
        id="colorPicker1"
        name="colorPicker1"
        value={defaultBGColor}
        onChange={handleBGColorChange}
      />
      <p>Current Color: {defaultBGColor}</p>
    </div>
  );
};

export default ColorPickerComponent;

describe('Color Picker Component Test', () => {
  beforeEach(() => {
    // Visit the page where the ColorPickerComponent is rendered
    cy.visit('localhost:3000/'); // Replace with your actual page URL
  });

  it('should change the background color when a new color is selected', () => {
    // Define the new color value you want to set
    const newColor = '#ff5733'; // Example: a shade of orange

    // Get the color input and change its value
    cy.get('#colorPicker1')
      .invoke('val', newColor) // Set the new color value
      .trigger('change'); // Trigger the change event

    // Assert that the input value has changed
    cy.get('#colorPicker1').should('have.value', newColor);

    // Assert that the background color of the div has changed
    cy.get('div') // Select the div that has the background color
      .should('have.css', 'background-color')
      .and('match', /rgba?(255, 87, 51/); // Match the RGB value for the new color
  });

  it('should log the new color value to the console', () => {
    // Spy on the console.log function
    cy.window().then((win) => {
      cy.stub(win.console, 'log').as('consoleLog'); // Alias the console.log

      // Define the new color value you want to set
      const newColor = '#ff5733'; // Example: a shade of orange

      // Get the color input and change its value
      cy.get('#colorPicker1')
        .invoke('val', newColor) // Set the new color value
        .trigger('change'); // Trigger the change event

      // Assert that console.log was called with the new color value
      cy.get('@consoleLog').should('have.been.calledWith', newColor);
    });
  });
});

Getting this error.

assertexpected [ <div#root>, 1 more… ] to have CSS property background-color with the value rgba(255, 87, 51), but the value was rgba(0, 0, 0, 0)

at this line

cy.get(‘div’).should(‘have.css’, ‘background-color’,’rgba(255, 87, 51)’)