How to change color of rectangle on resizing using React.JS?

import React, { useState, useEffect } from 'react';
import { Resizable } from 're-resizable';
import { withResizeDetector } from 'react-resize-detector';
import React, { useState, useEffect } from 'react';
import { Resizable } from 're-resizable';
import { withResizeDetector } from 'react-resize-detector';

const App = ({ width, height }) => {
    const [color, setColor] = useState('red');
    const [state, setState] = useState({
        width: 300, height: 100
    });

    useEffect(() => {
        setColor(width > 200 ? width > 300 ?
            '#dacbf7' : '#f1ccf8' : '#d3f8cc');
    }, [width]);

    return (
        <>
            <Resizable
                style={{
                    backgroundColor: color,
                    margin: '20px',
                    border: "1px solid black",
                    color: 'green',
                    fontSize: '20px',
                    textAlign: 'center',
                    fontWeight: 'bold'
                }}
                size={{
                    width: state.width,
                    height: state.height
                }}
                onResizeStop={(d) => {
                    setState({
                        width: state.width + d.width,
                        height: state.height + d.height,
                    });
                }}>
                {`${width}x${height}`}
            </Resizable>
            <p style={{
                color: 'blue', margin: '20px',
                fontSize: '20px'
            }}>Current Color: {color}</p>

        </>
    );
};

export default withResizeDetector(App);